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内 容 简 介 

这 是 一 本 用 来 修炼 网 页 编程 基本 功 的 图 书 ， 本 书 并 不 是 从 讲解 酷 炫 功能 入 手 ， 而 是 一 步 一 步 将 HTMLS5 元 素 
与 CSS3 属性 依 功能 分 类 ， 详 细 地 用 程序 实例 进行 解析 ， 期 望 读 者 以 最 轻松 的 方式 学 会 网 页 设计 的 基础 知识 。 

本 书 分 成 三 篇 : 第 一 篇 : HTMLS5 完整 学 习 〈 这 一 篇 是 学 习 网 页 设计 的 基础 。 笔 者 将 绝 大 部 分 HTMLS5 的 
元 素 依 功能 分 成 10 章 ， 用 了 约 150 个 程序 实例 与 图 片 做 出 说 明 ， 相 信 读 者 可 以 由 此 建立 HTML 的 扎实 基础 ) ; 
第 二 篇 : CSS3 完整 学 习 〈 本 篇 学 习 网 页 的 编辑 与 美化 。 笔 者 将 绝 大 部 分 CSS3 的 属性 依 功能 分 成 14 章 ， 用 了 
约 240 个 程序 实例 与 图 片 做 说 明 ， 在 此 读者 可 以 彻底 学 会 网 页 编辑 与 美化 的 基础 方法 与 技巧 ) ; 第 三 篇 : 迈 向 
网 页 设计 高 手 之 路 (在 这 一 篇 中 最 基础 的 知识 是 JavaScript， 当 读者 学 会 之 后 ， 可 以 继续 阅读 网 页 结构 BOM 与 
DOM。 后 面 章 节 读者 可 以 挑选 有 兴趣 的 主题 阅读 ; 如 果 对 动画 有 兴趣 可 以 阅读 Canvas ; 如 果 对 设计 汽车 导航 与 
地 图 定位 有 兴趣 可 以 阅读 第 31 章 ; 如 果 希 望 学 习 设 计 移动 端 网 页 可 以 参考 第 32 章 。 在 最 后 一 章 ， 本 书 将 以 实例 
说 明 网 页 转 成 APP 应 用 程序 的 方法 ， 未 来 各 位 读者 可 以 随时 将 用 HTML+CSS+JavaScript 开发 的 网 页 转 成 APP。 
在 这 一 篇 笔者 用 了 约 210 个 程序 实例 与 图 片 做 解说 ， 这 将 对 读者 学 习 高 级 的 网 页 设计 有 很 大 的 帮助 。 

为 了 提升 这 本 网 页 编程 图 书 的 阅读 体验 ， 本 书 从 策划 阶段 就 决心 彩色 印刷 ， 因 此 ， 在 图 书 结构 上 、 案 例 选择 
上 以 及 代码 样式 上 都 进行 了 细心 设计 ， 力 争 呈现 给 读者 一 本 与 众 不 同 的 网 页 编程 书 。 

本 书 适合 所 有 对 网 页 设计 与 编程 感 兴趣 的 读者 ， 尤 其 适合 网 页 设计 师 等 互联 网 设计 岗位 ， 同 时 也 可 以 作为 社 
会 培训 教材 。 
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根据 多 年 的 自学 与 教学 经 验 ， 作 者 深刻 体会 到 建立 扎实 学 识 基础 的 重要 性 ， 因 此 本 书 
一 开始 并 不 是 介绍 一 些 炫 酷 的 功能 ， 而 是 一 步 一 步 将 HTMLS 元 素 与 CSS3 属性 依 功 能 分 
类 ， 详 细 地 用 程序 实例 做 解说 ， 期 望 读者 以 最 轻松 的 方式 学 会 网 页 设计 的 基础 知识 。 

本 书 分 成 三 篇 : 

口 第 一 篇 : HTML5 完整 学 习 

这 一 篇 是 学 习 网 页 设计 的 基础 。 作 者 将 绝 大 部 分 HTMLS 的 元 素 (Element) 依 功能 分 
成 10 个 章节 ， 用 了 约 150 个 程序 实例 与 图 片 做 说 明 ， 相 信 读 者 可 以 由 此 建立 HTML 的 扎 
实 基础 。 

口 第 二 篇 : CSS3 完整 学 习 

这 一 篇 是 学 习 网 页 的 编辑 与 美化 。 作 者 将 绝 大 部 分 CSS3 的 属性 〈(Properties) 依 功能 
分 成 14 个 章节 ， 用 了 约 240 个 程序 实例 与 图 片 做 说 明 ， 在 此 读者 可 以 彻底 学 会 网 页 编辑 
与 美化 的 基础 方法 与 技巧 。 

口 第 三 篇 : 迈 向 网 页 设计 高 手 之 路 

在 这 一 篇 中 最 基础 的 知识 是 JavaScript， 当 读者 学 会 之 后 ， 可 以 继续 阅读 网 页 结构 的 
知识 BOM 与 DOM。 后 面 章节 读者 可 以 挑选 有 兴趣 的 主题 阅读 ; 如 果 对 动画 有 兴趣 可 
以 阅读 Canvas ; 如 果 对 设计 汽车 导航 与 地 图 定位 有 兴趣 可 以 阅读 第 31 章 介绍 的 内 容 ; 
如 果 希 望 学 习 设 计 用 于 手机 或 平板 电脑 显示 的 网 页 可 以 参考 第 32 章 介 绍 的 内 容 。 在 最 
后 一 章 ， 本 书 将 以 实例 说 明 网 页 转 成 APP 应 用 程序 的 方法 ， 未 来 各 位 读者 可 以 随时 将 用 
HTML+CSS+JavaScript 开发 的 网 页 转 成 APP。 在 这 一 篇 ， 作 者 用 了 约 210 个 程序 实例 与 
图 片 做 解说 ， 对 读者 学 习 高 级 的 网 页 设计 有 很 大 的 帮助 。 

HTML5+CSS3 的 设计 方式 已 经 改变 了 整个 网 页 设计 的 观念 。 过 去 设计 网 页 可 以 在 
HTML 文件 内 做 编辑 美化 ， 如 今 这 些 工作 已 经 全 部 交 由 CSS 处 理 ， 所 以 许多 老 版 本 的 元 
素 和 属性 已 经 被 弃 用 。 作 者 在 撰写 本 书 时 也 特别 谨慎 ， 原 则 上 在 程序 内 容 中 不 再 放 入 已 经 
弃 用 的 元 素 与 属性 ， 以 免 误 导读 者 。 另 外 ， 对 于 最 新 流行 的 响应 式 网 页 设计 ， 作 者 也 将 
以 实例 做 解说 。 依 作者 的 经 验 ， 在 设计 网 页 过 程 中 随时 需要 参考 HTML 与 CSS 的 语法 ， 
为 了 便于 读者 查询 ， 本 书 附 录 部 分 包含 了 HTML 元 素 与 属性 的 索引 表 和 CSS 属性 的 索引 
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表 ， 这 也 将 是 各 位 工作 时 用 来 查询 与 参考 的 一 大 利器 。 

其 实学 会 前 2 篇 的 内 容 已 经 足够 让 读者 成 为 前 端的 网 页 设计 师 了 ， 如 果 还 有 兴趣 继续 
钻研 ， 可 以 阅读 第 三 篇 。 

作者 写 过 许多 计算 机 方面 的 书籍 ， 本 书 沿袭 一 贯 特色 ， 程 序 实例 丰富 ， 相 信 读 者 只 要 
按照 本 书 内 容 学 习 ， 必 定 可 以 在 最 短 时 间 内 精通 网 页 设计 。 编 写本 书 虽 力求 完美 ， 但 能 力 
有 限 ， 廖 误 难免 ， 尚 祈 读 者 不 音 指 正 。 
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第 1 章 HTML5 的 历史 


认识 HTML 


HTML 的 英文 全 称 是 HyperText MarkUP Language， 它 是 一 种 标记 (Tag) 语言 ， 其 中 的 每 一 个 
标记 皆 是 一 个 指令 。 将 一 系列 的 标记 组 织 起 来 ， 就 可 用 于 网 页 设计 ， 得 到 我 们 使 用 浏览 器 所 看 到 的 
网 页 。 


蒂 姆 . 伯 纳 斯 一 李 (Tim Berners Lee) 


蒂 姆 。 伯 纳 斯 相片 来 自 下 述 网 页 : 
wwwflickrcom/photos/16189770@N00/3462300428/ 
蒂 姆 。 伯 纳 斯 - 李 是 万 维 网 的 发 明 人 ， 是 英国 牛津 大 学 物理 系 毕 业 的 物理 学 家 与 计算 机 科学 
家 。 在 1980 年 6 月 至 12 月 在 欧洲 核子 研究 中 心 (European Organization for Nuclear Research， 
CERN) 工程 期 间 ， 为 了 让 CERN 的 研究 人 员 在 不 同 的 平台 上 可 以 分 享 信息 ， 他 建立 了 询问 计划 
(ENQUIRE) 的 原型 ， 在 一 份 备忘录 中 提出 了 因特网 〈Internet) 的 超 文 本 (Hypertext) 概念 。 


之 后 他 离开 了 CERN， 到 英国 西南 部 伯 恩 茅 斯 (Bournemouth) 计算 机 公司 工作 ， 这 期 间 他 参与 
了 远程 过 程 调用 计划 ， 获 得 了 更 多 计算 机 网 络 的 经 验 ，1984 年 他 以 正式 员工 身份 回 到 CERN 工作 。 

1989 年 ，CERN 是 欧洲 最 大 的 因特网 节点 ， 蒂 姆 。 伯 纳 斯 - 李 看 到 了 将 超 文本 与 因特网 结合 的 机 
会 ， 同 年 3 月 他 写 下 了 将 超 文本 系统 、 网 络 传输 协议 与 域名 系统 结合 的 初步 构想 ， 并 在 1990 年 设计 了 
全 球 第 一 个 网 页 浏览 器 与 网 页 服务 器 。 世 界 第 一 个 网 站 就 在 CERN 成 功 建立 了 。 


带 姆 . 伯 纳 斯 - 李 在 CERN 工作 时 的 计算 机 NeXT， 也 是 世界 第 一 台 万 维 网 服务 器 
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https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/First Web Server.jpg/1024px-First_ 
Web Server.jpg 

info.cern.ch 是 世界 上 第 一 个 网 站 ， 架 设 在 上 述 机 器 上 ， 第 一 个 网 页 网 址 是 : 

http://info.cern.ch/hypertext WWW/TheProject.html 


| 1-3 | HTML 历史 上 的 3 个 重要 协会 


DO IETF : Internet Engineering Task Force 


国际 互联 网 工程 任务 组 ， 这 个 小 组 的 英文 简称 是 IETF， 成 立 于 1986 年 1 月 16 日 ， 它 的 网 址 
如 下 : 
www.ieft.org 

这 个 协会 曾经 参与 整理 与 发 布 HIML2.0， 但 只 到 公开 讨论 RFC (Request For Comments) 阶 
段 ， 同 时 组 织 成 员 间 因为 竞争 利益 ， 让 HTML 标准 制定 工程 停滞 。IETS 在 1996 年 9 月 12 日 关闭 
了 它 下 设 的 HTML 工作 组 。 
OD W3C : World Wide Web Consortium 


中 文 译 为 万 维 网 联盟 ， 这 个 协会 的 英文 简称 是 W3C， 成 立 于 1994 年 10 月 1 日 ， 总 部 设 在 美国 
麻 省 理工 学 院 ， 它 的 网 址 如 下 : 
Www.W3.org 
这 个 协会 是 由 万 维 网 的 发 明 人 蒂 姆 。 伯 纳 斯 - 李 所 创 。 
在 网 络 世界 许多 大 公司 省 有 自己 的 Web 平台 与 技术 ， 不 同 语系 的 国家 也 有 各 自 的 语言 规范 ， 为 
了 解决 这 些 问 题 ，W3C 制定 了 一 些 标准 ， 并 推荐 给 各 大 浏览 器 〈Browser) 开发 厂商 和 内 容 提 供 厂 
商 遵 循 。 在 所 有 推荐 标准 发 布 前 ， 会 经 过 下 列 程序 : 
(1) W3C 委员 根据 各 厂商 建议 ， 建 立 草案 (Draft) 并 发 布 。 
(2) 进行 草案 公开 讨论 ， 然 后 进入 候选 〈Candidate) 阶段 并 发 布 。 
(3) 推荐 (Recommendation，REC) 标准 发 布 。 
W3C 目前 除了 制定 HTML 标准 外 ， 还 制定 了 CSS 规范 。 
口 WHATWG : Web Hypertext Application Technology Working Group 
中 文 译 为 网 页 超 文 本 应 用 技术 工作 小 组 ， 这 个 协会 的 英文 简称 是 WHATWG， 成 立 于 2004 年 6 
月 4 日 ， 总 部 设 在 美国 麻 省 理工 学 院 ， 它 的 网 址 是 : 
whatwg.org 
这 个 组 织 初期 主要 由 Apple、Google、Opera 软件 公司 和 Mozilla 基金 会 等 重要 的 浏览 器 开发 
厂商 组 成 ， 成 立 的 目的 就 是 为 了 要 推动 HTML5 标准 。 当 时 W3C 曾经 想 要 放弃 HTML 改 为 开发 以 
XML 为 基础 的 技术 XHTML， 在 WHATWG 成 立 后 就 否决 了 W3C 所 提 的 标准 。2007 年 4 月 10 日 
几 家 重要 的 浏览 器 开发 商 Apple、Google、Opera 和 Mozilla 基金 会 建议 W3C 接受 WHATWG 开发 的 


第 1 章 HTML5 的 历史 


HTML5，2007 年 5 月 9 日 W3C 协会 接受 了 这 个 建议 ， 所 以 也 可 以 说 HTML5 是 W3C 和 WHATWG 
合作 下 的 产品 。 


| 1-4 | HTML 的 发 展 史 


认识 了 上 一 节 所 述 的 3 个 协会 后 ， 我 们 知道 HIMLS 是 WHATWG 和 W3C 合作 下 的 产物 。 
HTML 的 发 展 史 


发 表 日 其 发 表单 位 发 表 形 式 
11995 年 1 月 24 日 。 ”|IETF |RFC 公开 讨论 发 布 


1997 年 1 月 14 日 W3C REC 推荐 标准 并 发 布 
1997 年 12 月 18 日 W3C REC 推荐 标准 并 发 布 


REC 推荐 标准 并发 布 
REC 推荐 标准 并 发 布 


HTML5.1 2016 年 6 月 21 日 Candidate REC 推荐 标准 并 发 布 
@ RFC ( Request for Comments ) 是 公开 讨论 阶段 ,REC ( Recommendation ) 是 正式 定稿 推荐 标准 
并 发 布 ，Candidate REC 是 目前 候选 阶段 的 推荐 标准 。 


由 上 表 可 知 ，IETF 所 发 表 的 HTML2.0 并 未 达到 公开 推荐 标准 阶段 。 其 实在 1995 年 IETF 也 曾 
经 提案 HTML3.0 标准 ， 但 是 当时 不 被 浏览 器 开发 商 采 纳 ， 因 此 没有 成 功 ， 就 被 后 来 W3C 发 表 的 
HTML3.2 取代 了 。 

读者 可 能 觉得 奇怪 ， 为 什么 没有 HTML1.0 版 本 ? 这 主要 是 因为 当时 W3C 尚未 成 立 ， 没 有 专责 
机 构 制定 规范 ， 因 此 有 许多 不 同 版 本 。 几 个 开发 的 重要 草案 发 表 时 间 如 下 : 


口 1991 年 10 月 

非 正式 的 CERN 档案 公开 了 16 个 HIML 标记 。 
口 1992 年 6 月 

非 正式 草案 HTML DTD 发 表 。 
口 1992 年 11 月 


非 正 式 草 案 HTML DTD 1.1 发 表 。 
至 于 HTML5 的 诞生 ， 从 2007 年 5 月 9 日 W3C 协会 接受 了 WHATWG 建议 到 正式 发 表 ， 也 经 
历 了 如 下 历程 : 


口 2008 年 1 月 

W3C 正式 发 布 HTMLS5 的 工作 草案 。 
口 2011 年 5 月 

W3C 将 HTMLS5 推广 至 最 终 征求 (Last Call) 阶段， 将 最 终 完成 标准 推荐 的 日 期 订 在 2014 年 。 
口 2012 年 12 月 

W3C 将 HTML5 推广 至 候选 推荐 (Candidate Recommendation)， 也 就 是 功能 不 会 被 删除 ， 


HIML3.2 
HIML4.0 
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可 以 增加 新 功能 。 
口 2014 年 10 月 28 日 
正式 推荐 标准 并 发 布 。 


国 ; 漠 HTML 开发 中 的 插曲 XHTML 


HTML4.01 推荐 标准 发 布 后 ， 开 始 进入 发 展 停滞 状态 ， 这 时 W3C 协会 利用 HTML 4.01 的 基础 
转 而 开发 XHTML。 
XHTML 的 英文 全 名 是 Extensible Hyper Text Markup Language， 中 文 解释 为 可 扩展 超 文 件 标记 
语言 。 下 表 是 XHTML 各 版 本 的 发 表 时 间 。 
XHTML 各 版 本 的 发 表 时 间 
发 表单 位 发 表 形 式 


2000 年 1 月 26 日 REC 推荐 标准 并 发 布 
2001 年 5 月 31 日 REC 推荐 标准 并 发 布 
XHTML2.0 2006 年 7 月 26 日 W3C Draft 草案 发 布 


不 过 XHTML 并 不 被 浏览 器 开发 商 所 接受 与 支持 ，WHATWG 甚至 认为 XHTML 不 是 用 户 所 需 
的 规范 ， 因 此 XHTML 也 就 不 再 有 后 续 版 本 。 


丁 沁 HTML 与 浏览 器 的 兼容 问题 


W3C 是 将 制定 的 HTML5 推荐 标准 发 布 了 ， 但 是 它 终究 只 是 一 个 协会 ， 制 定 的 是 规范 ， 而 不 是 
强制 规定 ， 有 的 规范 标准 未 被 浏览 器 开发 商 采 用 ， 因 此 ， 在 设计 HTML 文件 时 就 可 能 会 碰 上 有 些 功 
能 在 某 些 浏览 器 下 可 执行 ， 但 在 另 一 些 浏览 器 下 无 法 执行 的 情况 。 


HTML5 从 零 开始 


本 章 摘要 

2-1 HTML5 与 HTML4.01 

2-2 HTML 文件 结构 

2-3 认识 HTML 基本 元 素 

2-4 ”HTML 标记 类 型 

2-5 我 的 第 一 个 HTML 文件 
2-6 解析 我 的 第 一 个 HTML 文件 
2-7 HTML 文件 的 批注 
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要 加 HTML5 与 HTML4.01 


在 过 去 学 习 计 算 机 软件 的 观念 中 ， 每 当 有 更 新 版 的 软件 发 表 时 ， 一 定 可 以 看 到 新 版 增加 了 许多 
新 的 功能 ， 当 然 旧版 软件 的 功能 仍然 可 以 在 新 版 软件 内 使 用 。 
但 是 W3C 协会 正式 定稿 的 HTML5 发 表 后 ， 同 时 声明 废除 了 许多 HTML4.01 的 旧 元 素 
(Element)。 虽 然 目 前 一 些 浏览 器 仍然 支持 这 些 已 废除 的 旧 元 素 ， 但 笔者 建议 为 了 避免 未 来 网 页 显 
示 中 可 能 发 生 的 问题 ， 在 设计 网 页 时 不 要 使 用 HIML5 已 废除 的 元 素 。 所 以 本 书 在 叙述 内 容 时 ， 基 
本 上 不 再 介绍 与 使 用 存在 于 HTML4.01 但 HTMLS5 已 废除 的 元 素 。 


本 书后 述 HTML 专 指 HTML5。 


py 措 HTML 文件 结构 


HTML 文件 是 纯 文本 组 成 的 文件 ， 它 的 基 
本 文件 结构 如 下 : 


01 <!doctype html> 

02 <html lang="zh-tw"> 
03 <head> 

94 ~ 《标明 文件 资讯 ) 

05 </head> 

06 <body> 

07 ~ 《显示 在 网 页 上 的 内 容 ) 
08 </body> 

09 </html> 


其 实 我 们 也 可 以 称 HTML 文 件 是 由 
<html>、<head> 和 <body>3 个 元 素 所 组 成 。 注 
意 ，HTML 文件 是 没有 行 号 的 ， 此 处 的 行 号 只 
是 为 了 教学 和 读者 学 习 方 便 而 加 上 去 的 。 


2-2-1 大 小 写 皆 可 


HTML 对 标记 (tag) 本 身 所 用 的 英文 字母 
大 小 写 是 不 敏感 的 ， 用 英文 大 写字 母 或 小 写字 母 
编写 缘 可 接受 。 例 如 ， 将 <html> 改 成 <HTML> 
或 是 将 “doctype” 改 成 “DOCtype”， 所 代表 的 
意义 相同 。 


2-2-2 文件 声明 doctype 


在 HIML4.01 版 时 ， 需 要 在 文件 前 面 编 写 
一 长 串 的 doctype 声明 ， 以 注 明 是 使 用 哪 一 个 版 


本 的 DTD (Document Type Definition， 文 档 类 
型 定义 )。HTML5 由 于 没有 使 用 DTD， 所 以 简 
化 了 许多 ， 其 文件 的 第 一 行内 容 如 下 : 
<!ldoctype html> 
这 相当 于 告诉 浏览 器 ， 目 前 这 份 文件 是 符合 
HTML5 规范 的 ， 请 使 用 HIML5 的 标准 来 解析 
文件 。 


2-2-3 “html> … </html> 


在 HIML 文 件 中 只 有 doctype 是 写 在 
<html> 前 面 的 。 

起 始 标记 <html> 和 结束 标记 </html> 主要 
用 来 标示 这 区 间 内 的 数据 是 HTML 文件 。 虽 然 
所 有 HTML 文件 的 扩展 名 都 是 .htm 或 .html， 
浏览 器 已 经 可 从 扩展 名 判断 出 这 是 HTML 文件 
了 ， 不 过 笔者 仍 建议 加 上 这 个 标记 。 

上 面 的 文件 结构 中 ， 在 这 个 标记 内 笔者 加 
上 了 属性 lang="zh-tw"， 这 个 属性 标明 此 份 
HTML 文件 所 用 的 语言 是 繁体 中 文 。 标 注 语言 可 
以 协助 搜索 引擎 和 浏览 器 判别 目前 浏览 文件 所 使 
用 的 语言 。 下 列 是 几 种 常见 语言 的 标注 属性 值 。 

简体 中 文 : zh-cn 日 文 : ja 

英文 : en 韩文 : ko 


如 果 省 略 了 标注 语言 的 语句 ， 浏 览 器 将 依 所 
在 计算 机 的 语言 设 定 来 解读 这 份 HTML 文件 。 虽 
然 在 开始 标记 <html> 不 加 lang 属性 设 定 ， 程 序 
也 可 以 正确 执行 ， 但 是 HTMLS5 建议 在 所 设计 的 
HTML 文件 中 于 开始 标记 <html> 内 加 上 lang 
属性 。 

在 HTML 文件 中 ， 依 次 需 写 上 <head> … 
</head> 元 素 和 <body> … </body> 元素， 其 
实 我 们 也 可 以 说 ，<html> … </html> 内 部 是 由 
<head> 和 <body> 组 成 的 。 下 面 两 节 会 针对 此 做 
解说 。 

当然 ， 文 件 没有 加 <html> 起 始 和 </html> 
结束 标记 仍 可 以 被 正确 执行 ， 不 过 笔者 不 建 
议 如 此 操作 ， 所 以 本 书 所 有 程序 范例 皆 包 含 
此 标记 。 
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2-2-4 “head> … </head> 


位 于 <head> 和 </head> 之 间 的 内 容 基 本 
上 是 HTML 文件 头 ， 这 里 主要 包含 文件 标题 
<title> … </title>、CSS 样式 定义 、 作 者 信息 、 
文件 关键 词 信息 以 及 本 文 所 在 URL (Universal 
Resource Locator， 可 理解 为 Internet 地 址 ) 等 基 
准 信息 。 

写 在 <head> … </head> 间 的 信息 ， 除 了 标 
题 (title) 外 ， 都 不 会 在 浏览 器 中 显示 。 


2-2-5 “body> …</body> 


<body> … </body> 之 间 的 内 容 其 实 就 是 
HTML 文件 的 主体 ， 这 些 内 容 会 在 浏览 器 中 
显示 。 
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HTML 文件 由 元 素 组 成 ， 其 实 如果 读 者 学 
习 过 其 他 程序 语言 ， 也 可 以 将 元 素 想 成 是 程序 
指令 。HTML 元 素 (element) 的 基本 组 成 举例 
如 下 : 

<a href=http://www.deepstone.com.tw> 深 石 
数位 网 页 </a> 

参见 上 例 ， 几 个 与 元 素 相关 的 名 词 说 明 如 下 : 
口 元 素 (element) 

我 们 可 以 将 上 例 整 行 代码 称 为 一 个 HTML 
元 素 。 
口 ”起 始 标 记 (start tag) 

以 上 例 而 言 起 始 标记 指 的 是 下 列 数据 。 

<a href=http://www.deepstone.com.tw> 
口 ”结束 标记 (end tag) 

以 上 例 而 言 结束 标记 指 的 是 下 列 数据 。 

</a> 

结束 标记 是 在 “<” 符 号 后 紧 接着 “/” 符 
号 ， 最 后 再 加 上 元 素 名 称 和 “>” 符 号 。 


口 元素 名 称 

以 上 例 而 言 元 素 名 称 指 的 是 “a”。 
口 元素 内 容 

以 上 例 而 言 元 素 内 容 指 的 是 下 列 数据 。 

深 石 数位 网 页 
口 元素 属性 (attribute) 

以 上 例 而 言 元 素 属性 指 的 是 “href ”。 
口 ”元 素 属性 内 容 

以 上 例 而 言 元 素 属 性 内 容 指 的 是 下 列 
数据 。 

http://www.deepstone.com.tw 

HTML 所 有 元 素 名 称 使 用 时 均 需 使 用 符号 
“<” 和 “>” 括 起 来 ， 所 以 有 人 称 这 是 标记 。 
上 例 中 : 

<a> : 我 们 可 称 为 “a 标记 ”或 “标记 a”， 
也 可 称 为 “a 元素 ”或 “元 素 a”; 

a : 我 们 应 该 称 为 “a 元素” 或 “元 素 a”， 
也 可 称 为 “a 标记 ”或 “标记 a”。 
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读者 须 了 解 它 们 代表 的 意义 相同 。 

如 果 看 到 数据 注 明 href 是 “元 素 <a> 的 属 
性 ”或 “标记 <a>” 的 属性 ， 两 者 的 意义 是 相 
同 的 。 

综 上 所 述 ， 不 论 是 元 素 还 是 标记 ， 读 者 皆 可 


4 HTML 标记 类 型 
HTML 的 标记 类 型 有 两 种 。 
口 “容器 标记 (container tag) 


视 为 HTML 指令 。 对 于 HTML 而 言 ， 元 素 和 属 
性 的 概念 最 重要 。 有 些 相 同 字 既 是 元 素 也 可 以 当 
属性 使 用 ， 例 如 ,“span” 或 “button” 为 了 
区 分 两 者 ， 后 述 将 所 有 元 素 丝 加 上 标记 “<” 
和 “>”。 


这 类 型 的 标记 最 大 特点 是 成 对 出 现 ， 也 就 是 它 有 起 始 标记 和 结束 标记 ， 例 如 <html>、<head> 和 


<body> 等 。 
口 单一 标记 (single tag) 


有 些 标记 是 没有 结束 标记 的 ， 例 如 ，<br> (换行 输出 ， 可 参考 3-3 节 ) 、<hr>( 这 是 加 上 水 平分 


隔 线 的 标记 ， 可 参考 3-5 节 )。 


本 情 我 的 第 一 个 HTML 文件 


2-5-1 编辑 我 的 第 一 个 HTML 
文件 


HTML 是 纯 文本 格式 的 文档 ， 可 以 使 用 
Windows 内 附 的 记事 本 来 编辑 HTML 文件 。 除 
了 记事 本 ， 目 前 也 有 一 些 公司 开发 了 HITML 文 
件 编辑 器 ， 非 常 好 用 ， 例 如 Notepad++ (2-5-3 
节 将 做 简单 说 明 ) 和 WebStorm 等 。 

程序 实例 ch2_1.html : 下 面 笔者 将 以 记 
事 本 为 例 做 解说 。 在 记事 本 中 输入 如 下 所 示 
的 内 容 。 


EE] 未 命名 -记事 本 
想 秦 (F) 闫 加 (E) 格式 (O) 榨 视 WV) 说 明 (H) 
<ldoctype html> 
<html lang="zh-tw"> 
<head> 
<meta charset="utf-8"> 
<titlesch2_1.htnl</title> 
< head> 


| 


<body> 
Hello! HTMLS+CSSS 
</body> 
<ihtml> 


然后 执行 “文件 ”一 “保存 ”命令 。 

随后 可 以 看 到 “另存 为 ”对 话 框 ， 选 择 欲 保 
存 的 文件 夹 ， 如 “ch2”， 然 后 在 “文件 名 ”输入 框 
中 输入 “ch2_1html”， 在 “编码 ”下 拉 列 表 框 中 选 
择 “UTF-8” 然后 单 击 “ 保 存 ” 按 钮 。HTML 文 
件 的 扩展 名 是 html 或 htm， 本 书 全 部 使 用 html 
为 扩展 名 。 


Ce 


文件 保存 完成 后 ， 可 以 在 记事 本 标题 栏 看 到 
所 指定 的 文件 名 “ch2_1”。 


蛋 be 一 品 
档案 (F) 编辑 (日 格式 (O) 检视 V) 


kidoctype htnl> 

<html lang="zh-tw"> 

<head> 
<meta charset="utf-8"> 
<title>ch2_1.htnl</title> 

</head> 

<body> 

Hello! HTML5HCSS3 

<fbody> 

<ihtml> 


这 时 进入 ch2 文件 夹 可 以 看 到 下 面 的 画面 。 
rT 号 | 
EE :3 «en “@ 


© - 个 莉 。HTML5+CSS3 》 chz YO M3ch2 Pp 
DATA D) ~ 


天 certificate 人 
大 da5d43459891fa885bac 
得 dfdbc9045d9dazcab138 


WB Excel 2013 E 
HML chz.1 
下 HIML+CSS 

HMts 

Bk HIMLS+CSS3 


1 个 本目 图 


2-5-2 执行 我 的 第 一 个 HTML 
文件 


双击 上 述 ch2_1 文件 的 图 标 或 是 将 ch2_1 文 
件 的 图 标 拖 电 至 浏览 器 ， 可 以 打开 这 份 HTML 
文件 ， 并 显示 如 下 结果 。 


-°EN 
离 从 - 园 - 宇 杖 < mm- 2- IAO- 坊 “ 


Hollo! HTMLS+CSS3 


说 明 ， 本 例 笔者 使 用 的 是 Microsoft 公司 的 
Internet Explorer (简称 正 ) 浏览 器 ， 该 浏览 器 
到 9.0 版 以 后 才 对 HIML5 有 较 好 的 支持 。 笔 者 
在 撰写 本 书 时 ， 除 了 使 用 Internet Explorer 浏览 
器 外 ， 还 使 用 了 Apple 公司 的 Safari、Google 公 
司 的 Chrome、Opera 公司 的 Opera 和 Mozilla 基 
金 会 的 Firefox 浏览 器 做 测试 。 


2-5-3 Notepad++ 


Notepad++ 是 适合 在 Windows 环境 中 使 用 的 
HTML 文件 编辑 器 ， 主 要 优点 如 下 : 
1. 具有 智能 输入 功能 ， 输 入 元 素 或 属性 时 ， 只 


3， 


4. 
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要 输入 前 面 的 英文 字母 ， 其 后 关联 的 英文 字 
母 即 跳出 供 选 用 。 这 个 功能 除了 可 以 加 快 输 
入 速度 ， 还 可 以 避免 输入 错误 。 例 如 ， 当 输 
入 “he” 时 ， 可 自动 跳出 相关 的 元 素 或 属性 
供 选 用 。 


1 doctype htmig 
2 i 
3 L<hq 


h5 从 
hb6 
rn 

headers Y 


. HTML 文件 设计 完成 时 ， 元 素 、 元 素 内 容 、 


属性 与 属性 值 分 别 用 不 同 颜色 显示 ， 方 便 检 
查 程序 。 


型 aoctype htm] 引 

<html lang="zh-tw"> 

<head> 
<meta charset="utf-8"> 
<title>ch2 1.html</title> 

</head> 

<body> 

Hello! BTML5+CSS3 

</body> 

</html> 


方便 除 错 (debug)。HTML 文件 语法 出 问题 
时 ， 可 通过 显示 为 不 同 颜 色 的 元 素 或 属性 找 
出 错误 。 例 如 下 图 是 <meta> 元 素 名 称 输入 
错误 时 显示 的 画面 。 


SomeuwuwwnP 


2 烈 doctype htm] 吕 

2 日 <html lang="zh-tw"> 

3 <hg 

4 arset="utf-8"> 

号 Cm. 

6 </head 

7 <body> 

8 Hello! HTML5+CSS3 

9 </body> 
10 </html> 

可 以 选择 使 用 哪 一 种 浏览 器 执行 所 编写 的 
HTML 文件 。 

检视 (V) 编码 (N) 语言 () 设 定 (1) 巨 集 (M) 
执行 (R)- F 
Launch in Firefox Ctrl+Alt+ Shift+X 
Launchin 正 Ctrl+Alt+ Shift+I 
Launch in Chrome Ctrl+Alt+ Shift+R 
Launch in Safari Ctrl+Alt+ Shift+A 
Getphp help Ak+F1 
‘Wikipedia Search Alt+F3 
Open file in another instance AltrF6 
Send via Outlook Ctrl+Alt+ Shift+O 


文件 左边 有 行 号 ， 方 便 用 户 了 解 目前 的 编辑 


状况 与 阅读 文件 。 
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| 2-6 解析 我 的 第 一 个 HTML 文件 


为 了 方便 解说 ， 笔 者 将 ch2_1.html 文件 的 
内 容 再 列 示 一 次 : 
<!doctype html> 
<html lang="zh-tw"> 
<head> 
<meta charset="utf-8"> 
<title>ch2_1.html</title> 
</head> 
<body> 
Hello! HTML5+CSS3 
</body> 
</html> 


从 上 面 的 程序 可 以 知道 ， 相 较 2-2 节 所 述 
HTML 文件 结构 而 言 ， 我 们 只 增加 了 3 行 数据 ， 
分 别 是 第 4 行 、 第 5 行 和 第 8 行 。 


2-6-1 <meta> 元 素 


程序 第 4 行 笔者 使 用 了 <meta> 元 素 ， 这 个 
元 素 必 须 放 在 <head> 标记 内 。 有 关 <meta> 的 
另 一 个 规定 是 ， 必 须 写 在 HTML 文件 前 1024B 
之 内 。<meta> 元 素 的 主要 目的 是 提供 有 关 这 份 
HTML 文件 的 相关 信息 。 例 如 编码 方式 、 作 者 
信息 、 关 键 词 信息 或 重新 导向 网 址 以 便 将 用 户 
导向 至 另 一 个 网 址 等 。 由 于 有 关 <meta> 的 设 定 
有 很 多 ， 所 以 允许 <head> 标记 内 有 多 个 <meta> 
元 素 存在 。 它 的 相关 属性 设 定 如 下 : 


DD charset 


这 是 设 定 这 份 HTML 文件 的 编码 方式 ， 建 
议 设 定 此 属性 为 “utf-8”。 

UTF-8 英 文 全 名 是 8-bit Unicode 
Transformation Format， 这 是 一 种 适合 多 语系 的 
编码 规则 ， 使 用 可 变 长 度 的 方式 存储 字符 ， 以 节 
省 内 存 空 间 。 例 如 ， 对 于 英文 字母 而 言 使 用 1B 
存储 即 可 ， 对 于 含有 附加 符号 的 希腊 文 、 拉 丁 文 
或 阿拉 伯 文 等 则 用 两 个 字 节 空间 存储 字符 ， 汉 字 
则 是 以 3 个 字 节 空间 存储 字符 ， 只 有 极 少数 的 平 
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面 辅助 文字 需要 4 个 字 节 空间 储存 字符 。 也 就 是 
说 ， 这 种 编码 规则 已 经 包含 了 全 球 所 有 语言 的 
字符 了 ， 所 以 采用 这 种 编码 方式 设计 网 页 时 ， 
其 他 国家 的 浏览 器 只 要 支持 UTF-8 编码 规则 即 
可 正常 显示 。 例 如 ， 美 国人 即使 使 用 英文 版 的 
Internet Explorer 浏览 器 ， 也 可 以 正常 显示 汉字 。 

另外 ， 有 时 我 们 在 网 络 世界 浏览 其 他 国家 
的 网 页 时 ， 会 发 生 显示 乱码 的 情况 ， 主 要 原因 
就 是 对 方 网 页 设计 师 并 没有 将 charset 属性 设 
置 为 “utf-8”。 例 如 ， 早 期 简体 中 文 的 编码 是 
GB2312， 这 种 编码 方式 是 以 2 个 字符 的 长 度 存 
储 一 个 简体 中 文字 ， 由 于 这 种 编码 方式 不 能 用 
于 多 语系 ， 无 法 在 繁体 中 文 Windows 环境 中 使 
用 ， 如 果 网 页 设计 师 采 用 此 编码 方式 设计 网 页 ， 
将 造成 港 、 澳 和 台湾 繁体 中 文 Windows 环境 下 
的 用 户 在 浏览 此 网 页 时 显示 乱码 。 
DO name 

这 个 属性 的 值 有 : 

author : 文件 的 作者 信息 。 

description : 文件 的 描述 ， 在 此 设 定 的 内 容 
会 出 现在 搜索 引擎 的 搜寻 结果 中 。 

keywords : 文件 相关 的 关键 词 ， 方 便 搜 索引 
擎 使 用 。 如 果 要 输入 多 个 关键 词 ， 彼 此 间 用 逗号 
隔 开 。 

generator : 制作 此 文件 所 使 用 的 软件 。 

revised : 文件 最 新 版 本 信息 。 

使 用 name 属性 时 ， 需 搭配 一 个 content 属 
性 ， 这 相当 于 将 content 的 属性 值 关联 到 name 的 


属性 值 。 

实例 1 : 下 面 的 语句 提供 作者 的 信息 是 “ 洪 
锦 魁 ”。 

<meta name="author" content=" 洪 
锦 扔 "> 


实例 2 : 下 面 的 语句 搜索 引擎 提供 3 个 关键 


词 ,分 别 是 “ 洪 锦 魁 ”“ 深 五” 和 “DeepStone”。 
<meta name="keywords" content=" 洪 锦 
魁 ， 深 石 7 DeepStone"> 
实例 3 : 下 面 的 语句 是 对 HTML 文件 页 面 
的 描述 。 
<meta name="description™ 
"HTML5+CSS3 王者 归来 书籍 范例 "> 
实例 4 : 下 面 的 语句 列 出 了 本 文件 最 新 版 本 
的 信息 。 


<meta name="revised" content=" 洪 锦 魁 
2018/01/01"> 


content= 


OD http-equiv 


这 个 属性 的 值 有 : 

content-type : 在 HTML4.01 以 前 ， 可 以 使 
用 此 属性 值 设 定语 言 编码 信息 ， 但 是 现在 可 以 
用 charset 属性 取代 。 

refresh : 可 以 设 定 经 过 几 秒 后 重新 读 取 这 
个 页 面 ， 或 是 设 定 经 过 几 秒 后 重新 导向 至 另 一 
个 网 页 。 

使 用 http-equiv 属性 时 ， 需 搭配 一 个 content 
属性 ， 这 相当 于 将 content 的 属性 值 关联 到 http- 
equiv 的 属性 值 。 

实例 5 : 下 面 的 语句 是 设 定 HTML 文件 语 
言 编 码 为 台湾 繁体 中 文 。 


<meta http-equiv="content-language" 
content="zh-tw"> 


实例 6 : 下 面 的 语句 是 设 定 HTML 文件 语 
言 编码 为 简体 中 文 。 


<meta http-equiv="content-language" 
content="zh-ch"> 


实例 7 : 下 面 的 语句 是 设 定 HTML 文件 语 
言 编码 为 “utf-8”。 
<meta http-equiv="content-type" 


content="text/html"; charset="utf-8"> 


信 其 实 上 述 实例 是 HTML 老 版 本 的 实例 ， 笔 
者 此 处 只 为 列举 用 法 ，HTML5 的 网 页 设 
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计 师 基本 不 再 使 用 这 些 语法 ， 而 直接 采用 
ch2_1.html 第 4 行 的 语法 。 


实例 8 : 下 面 的 语句 是 设 定 HIML 文件 在 
经 过 5 秒 后 自动 重新 读 取 页 面 。 
<meta http-equiv="refresh" 


content="5"> 


实例 9 : 下 面 的 语句 是 设 定 HTML 文件 在 
经 过 5 秒 后 自动 导向 深 石 数字 公司 网 页 。 

<meta http-equiv=" refresh" 
content=" : 5;http://www.deepstone.con. 
tw"> 

上 述 实 例 9 的 功能 常用 在 网 页 搬家 时 ， 可 将 
用 户 导向 新 网 页 以 避免 客户 流失 。 


2-6-2 <title> 元 素 


这 个 元 素 主要 是 设 定 文件 标题 ， 在 <head> 
标记 只 能 设 定 一 次 <title>。 标 题 会 出 现在 浏览 器 
标题 、 浏 览 器 标记 列 、 浏 览 记录 及 收藏 列表 中 ， 
所 以 在 设 定时 要 简洁 ， 同 时 含义 最 好 可 以 完整 表 
达 整 个 网 页 。 以 ch2_1.html 而 言 ， 执 行 后 将 显示 
下 图 所 示 的 文件 标题 。 到 


eC me 
EE CE em 去 全 位 S$) 工 Rio 办- “ 


Hollo! HTMLS+CSS3 


上 图 所 示 窗 口中 ， 左 边 显示 的 是 ch2_1.html 
文件 的 地 址 ， 在 真实 网 络 世 界 里 这 里 显示 的 是 网 
页 的 地 址 ， 可 想 成 Internet 地 址 ， 第 4 章 会 做 更 
完整 的 说 明 ; 右边 的 是 使 用 <title> 元 素 设 定 的 
标题 。 

2-6-3 文件 主体 

ch2_1.html 文件 的 第 8 行内 容 是 其 主体 ， 属 

于 <body> … </body> 之 间 的 内 容 将 会 呈现 在 网 


页 内 。2-6-2 节 的 执行 结果 图 即 其 在 浏览 器 中 输 
出 的 内 容 。 
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| 2-7 HTML 文件 的 批注 


程序 编写 需要 的 时 间 长 了 ， 难 免 会 忘记 当初 的 想法 ， 所 以 有 经 验 的 程序 设计 师 均 会 在 设计 程 
序 时 ， 在 适当 的 位 置 加 上 批注 ; 或 是 在 团队 合作 中 ， 需 与 其 他 程序 设计 师 或 主管 分 享 程序 原 码 时 ， 
应 加 上 批注 。 强 烈 建议 读者 在 设计 中 、 大 型 程序 时 ， 适 度 地 为 程序 加 上 批注 ， 方 便 自己 或 是 他 人 阅 
读 。 在 HTML 文件 内 ,“<!--” 符 号 开始 的 文字 是 文件 批注 ， 直 至 “-->” 符 号 结束 。 批 注 一 般 用 于 说 
明 所 设计 的 文件 ， 浏 览 器 不 会 处 理 和 显示 。 
程序 实例 ch2_2.html : 这 个 程序 的 第 一 行 是 HTML 的 文件 批注 ， 主 要 内 容 是 在 简单 的 HTML 文件 
内 增加 作者 信息 ， 并 且 令 程序 执行 5 秒 后 ， 导 向 深 石 数字 公司 。 

1 <1-- HTML+CSS 王 者 归来 程序 范例 --> 


2 “!doctype html> 
3 <html lang="zh-tw"> 


4 <head> 

5 <meta charset="utf-8"> 

6 <meta name="author”content=" 洪 镑 魁 "> 

7 <meta name="keywords”content=" 潜 锅 土 ， 深 石 "> 

8 <meta http-equiv="refresh” content="5;http://ww.deepstone.com.tw"> 


9 <title>ch2 2.html</title> 
10 </head> 

11 <body> 

12 5 秒 后 将 进入 深 石 数字 公司 网 页 
13 </body> 

14 </html> 


5 秒 后 将 进入 深 五 数字 公司 网 页 


经 过 5 秒 后 ， 浏 览 器 导入 深 石 数字 公司 的 网 页 。 


© [TI -0 opionel are x 
育 全 - 国 - 忆 者 -am- =seg- Iaov 各- ” 


-5 


tone 过 五 划 位 


Deep Learnng 
深度 学 习 滴水 穿 石 


这 个 程序 的 第 1 行 是 文件 批注 ， 说 明 所 设计 的 文件 浏览 器 将 不 处 理 及 显示 。 另 外 这 个 HIML 文 
件 的 第 6 行 和 第 7 行 是 提供 给 搜索 引擎 使 用 的 ， 所 以 浏览 器 页 面 无 法 显示 其 信息 。 


习题 
请 设计 一 个 网 页 ， 这 个 网 页 将 列 出 你 的 个 人 资料 ， 所 列 内 容 可 以 自行 发 挥 ， 并 使 网 页 在 显示 30 秒 
后 ， 导 向 你 就 读 学 校 的 官网 。 


HTML 文件 输出 的 基本 知识 


本 章 摘要 


Sail 
= 之 
3-3 
3-4 
3-5 
876 
Ba 
3=8 
= 
3=10 
Se 
3=12 
3=13 
3-14 


浏览 器 处 理 数据 的 输出 

标题 输出 <hn> 元 素 

换行 输出 <br> 元 素 

保持 原始 文件 样式 <pre> 元 素 

水 平 线 <hr> 元 素 

段落 <p> 元 素 

文件 某 个 区 域 <section> 元 素 

页 首 <header> 元 素 

页 尾 <footer> 元 素 
粗 体 显 示 <b> 和 <strong> 元 素 
斜体 <em> 和 <i> 元 素 
引用 <cite>、<q> 和 <blockquote> 元 素 
加 上 底 纹 <mark> 元 素 
小 型 字 <small> 元 素 


3=15 


3=16 
3=17 
3=18 
3=19 
3=20 


3=21 


3=22 
3=23 
3-24 
号 =25 


显示 与 计算 机 有 关联 的 文字 <kbd>、 
<samp>、<var> 和 <code> 元 素 
定义 缩写 <abbr> 元 素 

定义 用 语 <dfn> 元 素 

内 容 新 增 与 删除 <ins> 和 <del> 元 素 
隔离 双向 文字 走向 <bdi> 元 素 
指定 文字 走向 <bdo dir="direction">… 
</bdo> 

标示 注音 或 拼音 <ruby>、<rt> 和 
<rp> 元 素 

上 标 <sup> 和 下 标 <sub> 元 素 

输出 特殊 字符 

HTML 的 树 状 结构 

HTML5 不 再 支持 的 元 素 与 属性 设 定 


HTMLS5 增加 了 许多 结构 的 区 块 元 素 ， 让 整个 文件 设计 可 以 更 加 结构 化 ， 同 时 清晰 易 懂 。 在 正式 


介绍 这 些 观念 前 ， 本 章 将 只 介绍 在 浏览 器 内 输出 HTML 文件 的 基本 知识 ， 以 奠定 读者 的 学 习 基础 。 


HTML5+CSS3 王者 归来 


浏览 器 处 理 数据 的 输出 


浏览 器 读 取 HTML 文件 时 ， 只 能 判读 元 素 
和 文字 ， 不 会 判别 其 中 的 回 车 和 空格 字符 ， 所 以 
输出 的 段落 数据 若 包含 回 车 和 空格 字符 时 ， 这 些 
字符 将 被 忽略 。 
程序 实例 ch3_1.html : 输出 一 首 诗 。 
1 《ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch3 1.html</title> 
6 </head> 
7 <body> 
8 李白 月 下 独 酌 
9 花 同一 变 酒 ， 
独 酌 无 双亲 ， 
举 杯 邀 明月 ， 
对 影 成 三 人 。 
</body> 
</html> 


执行 结果 


| 李白 月 下 独 静 伦 可 一 变 酒 ， 独 殉 无 双 和 ; 举 本 加 明 月 ， 对 影 成 三 人 。 


不 过 ， 在 输出 时 可 以 看 到 李白 的 “ 白 ” 字 
与 “月 ”之 间 有 一 个 英文 字符 的 空间 ， 这 个 空间 
类 似 于 英文 单词 间 的 空格 ， 同 样 情况 可 以 在 每 段 
第 1 个 字 〈 花 ”“ 独 ”“ 举 ”和 “对 ”) 的 左边 看 
到 。 另 外 ， 浏 览 器 在 处 理 数据 输出 时 ， 会 因 所 开 


标题 输出 <hn> 元 素 


<hn> 元 素 用 于 HTML 文件 的 标题 输出 ， 
输出 时 标题 会 在 下 一 行 显示 ， 具 有 换行 输出 的 
效果 ， 接 着 车 有 数据 也 会 自动 换行 输出 。n 的 
值 是 1-6， 代 表 有 6 种 标题 ，<hl> 是 字号 最 大 的 
标题 ，<h6> 是 字号 最 小 的 标题 。 设 计 HTML5 文 
件 更 强调 的 是 文件 的 语意 ， 所 以 在 设计 网 页 时 


请 慎重 选择 标题 的 大 小 ， 


16 


另外 ， 不 要 将 这 个 功 


启 的 浏览 器 窗口 宽度 ， 自 行 处 理 段 落 数据 的 编排 
事宜 。 

程序 实例 ch3_2.html : 观察 在 不 同 浏览 器 窗口 
宽度 下 ， 段 落 数据 的 输出 情况 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

.， <title>ch3 2.html</title> 

6 </head> 

7 <body> 

3 蒂 姆 。 伯 纳 斯 。 李 (Tim Berners Lee) 是 万 维 网 的 发 明 人 ， 

9 是 英国 牛津 大 学 物理 系 毕业 的 物理 学 家 与 计算 机 科学 家 。 在 

19 1986 年 6 月 至 12 月 承包 欧洲 核子 研究 中 心 

11 (European Organization for Nuclear Research, CERN) 
12 工程 期 间 ， 为 了 让 CERN 的 研究 人 

13 员 在 不 同 的 平台 上 可 以 分 享 信息 ， 他 建立 了 询问 计划 (ENQUIRE) 的 
14 原型 ， 在 一 份 备忘录 中 提出 了 因特网 的 超 文本 (Hypertext) 概 念 。 
15 </body> 

16 </html> 


执行 结果 


帝 姆 " 伯 纳 斯 - 李 (Tim Berners Lee) 是 万 维 网 的 发 明 人 ， 是 其 国 牛津 大 学 物 
和 Ut 韶 1980 年 6 月 a Tt 
研究 中 心 (European luclear Research , CERN) 工 

期 本 "为 了 CERN 和 人 名 丰 同人 rr 是 ， 7 
询问 计 风 (ENQUIRE)9 原 型 ， 在 一 份 备忘录 中 提出 了 因特网 的 超 文本 
(Hypertext) 概 念 * 


下 图 是 ch3_2.html 在 不 同 浏览 器 窗口 宽度 
下 的 输出 结果 。 


著 妈 * 伯 纳 斯 - 李 (Tim Bemers Lee) 是 万 维 网 的 改 明 人 ， ey 
DE 在 .1980 年 6 月 至 12 月 承包 欧 济 核 了 研究 中 (European Organizati 

Research ， CERN) 工程 期 问 ， 为 了 让 CERN 的 研 ; ey Perea 

询问 计划 ENQUIREN9 原 型 ， 在 -从 备 孙 让 提 出 了 因特网 的 引文 本 (Hyper 


能 用 在 段落 文字 内 ， 来 处 理 段落 中 某 字符 串 的 
字号 。 
程序 实例 ch3_3.html : 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 


认识 标题 的 输出 效果 。 


5 <title>ch3 3.html</title> 
6 </head> 

7 <body> 

8 <h1> 标 题 1</h1> 
9 <h2> 标 题 2</h2> 
16 <h3> 标 题 3</h3> 
11 <h4> 标 题 4</h4> 
12 <h5> 标 题 5</h5> 
13 <h6> 标 题 6</h6> 
14 </body> 

15 </html> 


第 3 章 HTML 文件 输出 的 基本 知识 


标题 1 
标题 2 
标题 3 


儒 从 这 个 实例 起 ， 为 了 节省 版 面 空 间 ， 输 出 
结果 中 将 裁 切 掉 窗 口 标题 和 功能 区 。 


< 届 换行 输出 <br> 元 素 


这 个 元 素 属于 2-4 节 所 述 的 单一 标记 类 ， 没 
有 结束 标记 ， 主 要 功能 是 换行 输出 ， 常 用 在 输出 
诗词 之 类 的 文件 或 是 撰写 地 址 数据 时 使 用 。 
程序 实例 ch3_4.html : 使 用 <hn> 和 <br> 元 素 
重新 改写 ch3_1.html， 其 中 “李白 ”使 用 标题 1 
输出 ,，“ 月 下 独 柄 ”使 用 标题 3 输出 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>ch3 4.html</title> 
6 </head> 

7 <body> 

8 <h1> 李 白 </hi> 

9 <h3> 月 下 独 柄 </h3> 

19 在 同一 杰 酒 ，<br> 

11 独 酌 无 双亲 ; <br> 

12 举 杯 道明 月 ，<bry> 

13 对 影 成 三 人 .<br> 

14 </body> 

15 </htm> 


李白 


月 下 独 酌 
花 司 一 壶 酒 ， 
独 酌 无 双亲 ; 
举 杯 洲 明月 ， | 
对 影 成 三 人 。 | 
由 于 接着 标题 输出 的 数据 会 换行 ， 所 以 可 以 
看 到 “ 花 间 一 壶 酒 ” 是 在 新 的 一 行 输出 的 。 
们 有 时 候 看 到 换行 的 写法 是 <br />， 这 其 实 
是 XHTML 文件 的 写法 。 


保持 原始 文件 样式 <pre> 元 素 


这 个 元 素 内 的 内 容 在 浏览 器 中 呈现 的 效果 将 
与 其 在 编辑 程序 时 所 看 到 的 相同 ， 常 用 在 显示 诗 
词 或 是 程序 语言 的 源 代 码 ， 在 网 页 内 保留 空格 和 
换行 。 
程序 实例 ch3_5.html : 将 编辑 器 内 呈现 的 李白 
诗 原始 样 瑶 呈 现在 浏览 器 内 。 


<ldoctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>ch3 5.html</title> 

</head> 

<body> 

<pre> 


李白 


中 NowhwNbb 


HTML5+CSS3 王者 归来 


19 花 同 一 赤 酒 ， 执行 结果 


11 独 酌 无 双亲 ; 

12 举 杯 邀 明月 ， i 
13 对 影 成 三 人 。 a | 
14 </pre> 独 的 无 双亲 3 

15 </body> 学 村 明月 | 
16 </html> WORN > 


水 平 线 <hr> 元 素 


这 个 元 素 也 没有 结束 标记 ， 主 要 用 在 主题 发 
生变 化 时 ， 输 出 为 一 条 水 平 线 。 
程序 实例 ch3_6.html : 输出 水 平 线 。 月 下 独 酌 


1 <ldoctype htmly 


2 <htnl> 祝 本 一 过 酒 ， 独 酌 无双 末 ; 举 标 济 明 月 ， 对 影 成 三 人 。 


3 <head> 
4 <meta charset="utf-8"> 
和 <title>ch3 6.html</title> 


6 </head> 静夜 思 


7 <body> 
8 <h1> 月 下 独 柄 </h1> 加 
9 花 同 一 查 酒 ， 独 酌 无 双亲 ; 举 丁 洲 明月 ， 对 影 成 三 人 。 床 前 明月 光 ， 疑 是 地 上 箱 。 举 头 尚明 月 ， 低 头 思 故 乡 。 


19 <hr> 

11 <h1> 静 夜 思 </h1> 

12 床 前 明月 光 ， 疑 是 地 上 逢 。 举 头 望 明 月 ， 低 头 思 故 乡 。 
13 </body> 

14 </html> 


gs 基 段落 <p> 元 素 


程序 ch3_6.html 不 是 一 个 好 的 HIML5 程 了 oi 二 地 上 东兴 头 妆 明月 ， 低 头 因 故 乡 。k/p》 
序 ， 因 为 HTMLS 希望 每 一 个 文字 段落 皆 是 有 内 。 3 Whoo 
涵 的 ， 皆 使 用 段落 元 素来 标记 ， 而 不 希望 文档 版 


式 中 有 未 经 元 素 注 明 的 数据 。 
一 般 短 段落 可 用 <p> 元 素 标记 出 来 。 
程序 实例 ch3_7.html : 将 <p> 元 素 应 用 在 月 下 独 酌 
ei de a 松本 一 坦 酒 ， 儿 本 无 双 末 ; 举 标 观 明月 ， 对 影 成 三 人 。 
2 <html> 


3 <head> 
4 <meta charset="utf-8"> E 
CN 


5 <title>ch3 7.html</title> 
6 </head> 
7 <body> y y 
人 床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 秘 明 月 ， 低 头 思 故 乡 。 


8 “<h1> 月 下 独 酌 </h1> 


9 “py> 花 同一 这 酒 ， 独 酌 无 双亲 举 杯 划 明月， 对 影 成 三 人 - </p> 
19 <hr> 
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文件 某 个 区 域 <section> 元 素 


通常 使 用 此 元 素 在 文件 中 标记 某 一 个 区 域 ， <section> 元 素 算是 HTML 的 区 块 级 元 素 ， 
在 此 区 域内 会 有 一 个 或 多 个 标题 。 在 实用 上 , 通 “在 这 种 层级 元 素 内 的 标题 会 被 自动 降 一 级 输 
常会 将 段落 数据 或 是 小 标题 数据 放 在 此 元 素 内 。 出 ， 所 以 虽然 程序 第 11 行 和 第 19 行 是 hl 级 标 
程序 实例 ch3_8.html : 使 用 <section> 元 素 标 ” 题 ， 但 输出 时 是 以 h2 标题 显示 大 小 。 


注 文件 某 一 区 段 的 应 用 。 一 般 简 单 的 网 页 版 面 配置 可 参考 下 图 。 
了 我 们 可 以 将 程序 实例 ch3_8.html 内 的 两 个 
4 eet charset=utf-8> <section> 元 素 当 作文 本 区 ， 第 8 行 和 第 9 行 
: rap 的 数据 则 当 作 网 页 的 页 首 区 。 从 网 页 语意 上 
8 chlygilicon Stone Education</hi> 讲 ， 上 述 程序 最 大 的 缺点 是 ， 我 们 没有 将 它 的 
9 <p> 国际 认证 的 权威 机 构 ， 位 于 加 州 尔 湾 ，</p> 
ne 标题 标示 出 来 。HTMLS 提供 了 功能 来 标示 网 


12 《py 大 数据 (BiBg Data) 已 成 为 目前 全 球 学 术 单位 、 政 府 机 关 以 及 页 的 标题 区 ， 标题 区 也 可 称 为 页 首 区 ， 这 将 在 


1 ea nay 
14 。。 运算 平台 ， 基 础 理论 ， 以 及 器 化 技术 的 成 康 ， 了 
15 。 ”大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 下 一 小 节 说 明 。 
ne 

17 《/sectiony 

18 <section> 

19 <hl>R Language Today</hi> 

29 p> 自由 软件 是 一 种 基于 $ 语言 的 GNU 免 妆 的 综 计 数学 套装 分 
214 。。 享 软 件 ， 为 探 家 性 数据 分 析 、 统 计 方法 及 固形 提供 了 所 有 的 
22 源码 . </p> 

23 </section> 

24 </body> 

25 </html> 


执行 结果 


Silicon Stone Education 

国际 认 三 的 权威 机 构 ， 位 于 加 外 海 = 

Big Data Knowledge 

ey De 有 加 池 相公 下 从 们 关 光 天 四座 加 
原理 、 实 作 、 工 具 、 应 用 以 及 未 来 给 擒 ， 将 会 是 求学 进修、 求职 ， 深 洁 的 必 各 技能 * 

R Language Today 


让 由 软件 R 是 一 种 基于 S 司 言 的 GNU 免 费 的 迪 计 贱 学 套装 分 享 软件 ， 为 探 案 性 至 据 分 析 、 弧 计 
方法 及 图 形 提供 了 所 有 的 源码 * 


页 首 <header> 元 素 


Header 区 又 称 文件 页 首 区 ， 指 的 是 网 页 或 ”程序 实例 ch3_9.html : 重新 设计 实例 ch3_s. 
文件 上 方 的 区 域 ， 可 参考 3-7 节 简 单 网 页 版 面 配 ”html， 主 要 是 增加 页 首 标记 。 
置 图 ， 通 常会 将 网 页 大 标题 、 简 单 批注 说 明 等 数 
据 放 在 此 区 。 


HTML5+CSS3 王者 归来 


| 3-9 | 页 尾 <footer> 元 素 


<ldoctype html> 

<html> 

<head> 
<meta charset="utf-2"> 
<title>ch3 9.html</title> 

</head> 

<body> 

<header> 
<h1>silicon Stone Education¢/h1> 
<p> 国 际 认证 的 权威 机 构 ， 位 于 加 州 尔 湾 。</p> 

</header> 

<section> 
<hi>Big Data Knowledge</h1> 
<p> 大 数据 (Big Data) 已 成 为 目前 全 球 学 术 单位 、 政 府 机 关 以 及 
顶级 企业 必须 认真 面 对 的 挑战 ， 卫 着 有 关 大 数据 的 程序 语言 、 
运算 平台 、 基 础 理论 ， 以 及 座 拟 化 、 容 器 化 技术 的 成 熟 ， 了 解 
大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 趋势 ， 将 会 是 求 
学 、 进 修 、 求 职 ， 深 造 的 必 备 技能 。</p> 


Footer 区 又 称 文件 页 尾 区 ， 指 的 是 网 页 或 文 


件 下 方 的 区 域 ， 可 参考 3-7 节 简 单 网 页 版 面 配置 
图 ， 通 常会 将 公司 联络 信息 、 版 权 信息 或 相关 链 
接 放 在 此 区 域 。 

程序 实例 ch3_10.html : 为 前 一 个 实例 加 上 页 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch3 10.html</title> 
</head> 
<body> 
<header> 
<hl>silicon Stone Education¢/h1> 
<p> 国 际 认证 的 权威 机 构 ， 位 于 加 州 尔 湾 。</p> 
</header> 
<section> 
<ha>Big Data Knowledge</h1> 
<p> 大 数据 (Big Data) 已 成 为 目前 全 球 学 术 单位 、 政 府 机关 以 及 
顶级 企业 必须 认真 面 对 的 挑战 ， 随 着 有 关 大 数据 的 程序 沙 言 、 
运算 平台 、 基 础 理论 ， 以 及 座 拟 化 、 容 器 化 技术 的 成 熟 ， 了 解 
大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 趋势 ， 将 会 是 求 
学 、 进 修 、 求 职 ， 深 造 的 必 备 技能 。</p> 


19 </section> 

29 <section> 

21 <h1>R Language Today</h1> 

22 《p> 自由 软件 R 是 一 种 基 于 S 语 言 的 6NU 免 费 的 统计 数学 套装 分 
23  ” 享 软 件 ， 为 探索 性 数据 分 析 、 统 计 方法 及 图 形 提供 了 所 有 的 
24 源码 .</p> 

25 </section> 

25 </body> 

27 </html> 


执 4 
ch3_9.html 的 执行 结果 与 ch3_8.html 相同 ， 


所 以 不 再 列 出 ， 这 个 程序 的 最 大 特点 是 程序 的 语 
意 非常 清楚 。 


19 </section> 

26 <section> 

21 <hl>R Language Today</h1> 

22 ”<p> 自白 软件 R 是 一 科 基 于 5 语言 的 GNU 免 费 的 统计 数学 套装 分 
23  ” 享 软 件 , 为 探索 性 数据 分 析 、 统 计 方 注 及 图 形 提供 了 所 有 的 
24 尖 码 。</p> 

25 </section> 

26 <footer> 

27 <br> 

28 <p>CopyRight 2817, Silicon Stone Education, Inc.</p> 
29 </footer> 

38 </body> 

31 </html> 


EE 和 二 由 加 上 页 尾 信息 后 的 效果 如 下 图 所 示 。 


R Language Today 


自由 软件 R 是 一 种 基于 S 说 言 的 GNU 物 费 的 统计 数学 变 闫 分 享 
软件 "为 探索 性 数据 分 析 、 统 计 方法 及 图 形 提供 了 所 有 的 源码 * 
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上 述 实例 的 第 27 行 笔 者 加 了 <br> 元 素 ， 目 
的 是 让 页 尾数 据 与 文本 区 之 间 多 一 些 空间 。 


粗 体 显 示 <b> 和 <strong> 元 素 


过 去 <b> 元 素 只 是 标示 粗 体 文字 ， 而 将 其 应 用 在 文件 的 关键 词 ， 例 如 商品 介绍 或 目录 
HTMLS5 更 强调 的 是 元 素 的 语意 。 因 此 <b> 元 素 ”内 的 商品 名 称 ， 或 是 想 要 将 某 字 符 串 与 其 他 内 容 
虽然 显示 时 是 粗 体 ， 但 是 原始 的 用 意 是 希望 用 户 ” 区 隔 。 


<strong> 元 素 也 可 以 让 内 容 以 粗 体 显示 ， 一 
般 是 用 在 重要 内 容 上 。 
程序 实例 ch3_11.html : <b> 和 <strong> 元 素 
的 应 用 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch3 11.htnl</title> 
6 </head> 


第 3 章 HTML 文件 输出 的 基本 知识 


7 <body> 
8 <py> 深 五 数字 的 核心 理念 是 <strongy 深 度 学 习 滴水 穿 石 c/strong></py 
9 “p》 深 石 数 字 的 <by 网 络 数 字 部 门 </b> 业 务 是 <by> 设 计 在 线 教材 </b></p> 
19 </body> 
11 </html> 


滩 石 数字 的 核心 理念 是 深度 学 习 滴水 穿 石 


深 五 数字 的 网 络 数字 部 门 业 务 是 设计 在 线 教材 


< 十 国 斜体 <em> 和 <i> 元 素 


过 去 <i> 元 素 只 是 标示 斜体 文字 ， 而 在 
HTML5 中 还 代表 声音 、 情 感 、 思 考 、 船 舶 名 称 
或 不 同 的 语言 类 别 等 。 

<em> 元 素 虽 然 也 是 将 所 标示 的 文字 以 斜体 
显示 ， 但 是 此 元 素 语意 的 重点 是 强调 ， 如 果 表 示 
重要 内 容 则 建议 使 用 <strong> 元 素 。 
程序 实例 ch3_12.html : <em> 和 <i> 元 素 的 
应 用 。 


1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


5 


<title>ch3 12,html</title> 


6 </head> 

7 <body> 

8 <h1> 今 年 送 给 母亲 节 的 礼物 </h1> 

9 <p»1: 带 母亲 坐 邮 轮 <i> 维 多 利 亚 号 </i> 遵 游 地 中 海 。</p> 
19 <p>2: 送 母亲 喜欢 的 <em> 康 乃 萄 (/em> 花 卉 。</p> 

11 </body> 

12 </html> 


今年 送 给 母亲 节 的 礼物 | 
1 帝 昌 末 业 好 轮 闪 多 下 69ltb 海 。 
2 迁 加 穴 N 的 有 和 EF。 


ep 引用 <cite>、<q> 和 <blockquote> 元 素 


<cite> 元 素 可 以 让 内 容 以 斜体 显示 ， 主 要 用 
在 引用 源 的 标题 。 

<q> 元 素 可 以 让 内 容 前 后 自动 加 上 引号 ， 主 
要 用 在 引用 短篇 文章 或 段落 元 素 时 。 如 果 所 引用 
的 短文 位 于 因特网 则 应 使 用 <cite> 元 素 ， 下 一 
章 会 以 程序 实例 ch4_9.html 做 说 明 。 

<blockquote> 元 素 主要 用 于 引用 长 篇 文章 ， 
所 引用 的 文章 会 有 缩 排 效果 ， 如 果 所 引用 的 文章 
位 于 因特网 则 也 应 使 用 <cite> 元 素 。 
程序 实例 ch3_13.html : <cite>、<q> 和 <blockquote> 


元 素 的 应 用 。 


o Nowhwnh 


o 


19 
11 
12 
13 
14 
15 


<ldoctype html> 
<html> 
<head> 

<meta charset="utf-8"> 

<title>ch3 13.html</title> 
</head> 
<body> 
《p> 千 呼 万 唤 始 出 来 ， 犹 拍 琵琶 半 谍 面 。 这 句 经 典 名 言 出 自 
<cite> 玲 舍 行 /cite>， 这 是 唐 代 文学 家 白居易 的 作品 </p> 
<p><q> 天 生 我 材 必 有 用 </9> <q> 抽 刀 断 水 水 更 流 ， 举 杯 消 
悉 悉 更 悉 c</q> 以 上 箔 是 唐 代 大 诗人 李白 的 名 言 </p> 
<p> 以 下 营 是 唐 代 大 诗人 杜甫 的 作品 </p> 
<p><blockquote> 
国 破 山河 在 ， 城 春草 木 深 - 
感 时 花 溅 泪 ， 恨 别 鸟 停 心 - 


HTML5+CSS3 王者 归来 


16 烽火 连 三 月 ， 家 书 抵 万 金 。 

17 白头 摄 更 短 ， 浑 欲 不 剩 等。 

18 剑 外 忽 传 收获 北 ， 初 闻 涕 泪 满 衣裳. 
19 却 看 妻子 悉 何 在 ， 漫 卷 诗 书 喜 欲 狂 。 
29 </blockquote></p> 

21 </body> 

22 </html> 


于 各 万 区 H 玫 ， 折扣 三 站" 这 句 经 闪 名 出 白 在 订户 
这 是 唐 代 文 学 家 白 居 与 8 作曲 
* 天 生 我 村 世 有 用 ”“ 折 刀 断水 水 更 流 * 举 标 江 直到 秒 " 以 上 乔 是 

Be 
以 下 家 时 化 大 诗人 杜 南 的 作品 

国民 1 亲 在 ， 扰 春 草木 深 * 积 时 花 注 目 * 候 8 乌 信 

心 = 烽火 连 三 月 ， 家 书 拱 万 金 ， 白头 扔 更 短 ， 宪 区 不 
箱 等 。 刻 外 起 传 收 芥 北 ， 初 加 济 泪 桨 在 区 ， 却 看 雪子 
区 何在 ， 温 竺 尘 书 才 葡 王 ” 


加 上 底 纹 <mark> 元 素 


将 资料 加 上 底 纹 可 以 让 读者 更 容易 关注 ， 所 
以 一 些 需 做 特别 解说 的 部 分 ， 最 好 加 上 底 纹 。 
程序 实例 ch3_14.html : <mark> 元 素 的 应 用 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch3_ 14.html¢/title> 

6 </head> 

7 <body> 

8 <p>2966 年 2 月 , 为 了 享受 边 泡 温泉 边 看 极光 (Northern Light》 
9 ， 一 人 独自 坐 飞机 至 阿拉 斯 加 〈Alaska) ， 再 开车 往 北 至 授 

18 近 北 极 图 的 <mark>Chena Hot springs 温 泰 滨 假 村 c/mark>。 旅 


11 游 期 同 举 试 开车 直达 北极 海 (Arctic Ocean) ， 第 一 次 车 子 在 
12 冰天雪地 打滑 ， 撞 山 整 失 败 而 返 。 第 二 次 三 上 杂 风 要 ， 再 度 
13 失败 。</py 

14 </body> 

15 </html> 


执行 结果 


2006 年 2 月 ,为 了 享受 边 泡 温泉 边 看 极光 (Northern Light)， — 
坐 -飞机 至 阿拉 斯 加 《Alaska ) ， 再 开车 往 北 至 拉 近 北极 图 的 

旅游 期 间 宏 试 开车 直达 北极 海 《Arctic 
Es A 擅 山 眶 失败 而 运 。 第 二 次 可 


四 


小 型 字 <small> 元 素 


<small> 元 素 虽 然 可 以 让 所 标示 的 文字 变 
小 ， 但 是 ， 这 不 是 这 个 元 素 主要 的 意义 ， 它 的 主 
要 意义 是 用 于 批注 信息 ， 例 如 网 页 脚注 区 的 法 律 
声明 、 警 告 声 明 或 著作 权 声 明 等 。 
程序 实例 ch3_15.html : 修改 ch3_10.html 的 第 
28 行 。 其 实 该 行 数据 就 很 适合 用 <small> 元 素 
标示 ， 下 面 将 只 列 出 该 行内 容 。 


28 <p><small>CopyRight 2017, Silicon Stone Education, INC.</small></p> 


aEE 和 于 读者 可 以 将 下 列 执行 结果 与 
ch3_10.html 的 执行 结果 做 比较 ， 可 看 到 字号 明 
显 变 小 了 


R Language Today 


软件 R 是 一 种 基于 S 语言 的 GNU 免 费 的 统计 数学 套装 分 享 软件 ， 对 于 探 案 性 数据 分 析 、 
和 而 * 
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显示 与 计算 机 有 关联 的 文字 <kbd>、 
<samp>、<var> 和 <code> 元 素 


<kbd> 元 素 主要 用 于 显示 计算 机 键盘 或 语音 输入 的 内 容 。 


第 3 章 “HTML 文件 输出 的 基本 知识 


<samp> 元 素 主要 用 于 显示 计算 机 程序 产生 


的 结果 。 et 让 
<var> 元 素 主要 用 于 显示 变量 ,例如 显示 程 ened | 


序 语言 的 变量 或 数学 公式 的 变量 。 
<code> 元 素 主要 用 于 显示 部 分 程序 语 ”程序 实例 ch3_17.html : <code> 元 素 的 应 用 。 


1 <ldoctype html> 
言 的 原始 码 、HTML 或 CSS 的 元 素 名 称 或 2 ch 
3 <head> 
4 <meta charset="utf-8"> 
属 性 等 hy 5 <title>ch3 17.html</title> 
/head 
程序 实例 ch3_16.html: <kbd>、<samp> 和 ;ow 
8 <p>CSS 主 要 精神 是 使 用 <codeystyle</code> 进 行 设 计 与 排版 </p> 
<var> 元 素 的 应 用 。 9 <preyccodey 
人 
1 <ldoctype html> 11 color:blue; 
342 和 
2 <html> 13 </codeyc/prey 
3 <head> 14 </body> 
4 <meta charset="utf-8"> 15 </htmly 
5 <title>ch3 16.html</title> 
6 </head> 
7 <body> 执 结 
8 <p> 进 入 系统 首先 需 输入 <kbd>deepstone</kbd> 再 按 Enter 键 </p> gy 
9 <p> 在 这 个 应 用 中 ， 变 量 <var>data</var> 需 输入 当天 交易 量 </p> CSS 主 要 情 神 是 使 用 styl 进行 设计 与 排 上 i 
18 <p> 窗 口 会 显示 <samp> 数 据 输入 成 功 </samp></p> 
11 </body> 
12 </html> color:blve; "| 
中 | 
本 证 过 <abbr> 元 素 
<abbr> 元 素 主 要 用 于 定义 一 个 缩写 。 9 <abbr title="Silicon Stone Education">SSE</abbr> 
10 was founded in 2014. 
程序 实例 ch3_18.html : <abbr> 元 素 的 应 用 。 3 
1 <!doctype html> 12 </body> 
2 <html> 13 </html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch3_18.html</title> 
6 </head> 
7 <body> The SSE was founded in 2014. | 
8 <p>The 


| 3-17 | 定义 用 语 <dfn> 元 素 


<df> 元 素 用 于 定义 用 语 , 数据 将 以 斜体 输出 。 。 ,Se 和 守 A 


二 11 </p> 
程序 实例 ch3_19.html : <dfn> 元 素 的 应 用 。 了 2 </body> 
13 </html> 

1 <idoctype html> 

2 <html> 

3 <head> 一 

4 <meta charset="utf-8"> 热 和 可 

5 xstitleycha_19.htmlc/titley 

6 </head> 

7 <body> DespStone 扰 台 尖 汉 石 吉 字 公司 开 友人 软件， 槟 心 精 神 旺 深度 学 

Ee 
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<ins> 元 素 表示 新 增加 的 资料 ， 将 以 加 下 画 


线 的 方式 表示 。 
<del> 元 素 表示 要 删除 的 元 素 ， 将 以 加 删除 
线 的 方式 处 理 。 


程序 实例 ch3_20.html : <ins> 和 <del> 元 素 的 
应 用 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

S <title>ch3 20.html</title> 
6 </head> 


内 容 新 增 与 删除 <ins> 和 <del> 元 素 


7 <body> 

8 <h2> 深 石 数 位 公告 </h2> 

9 <p> 

19 由 于 软件 更 新 <de1> 深 石 学 习 1.6</del> 即 日 起 停止 支持 ， 
11 请 下 载 <ins > 深 石 学 习 2.6</ins> 

12 </p> 

13 </body> 

14 </html> 


深 石 数位 公告 
由 于 坎 件 更 新 深 厂 学 导 +.9 即 日 超 停 止 支持 ， 请 下 载 深 石 学 习 2.0 


有 隔离 双向 文字 走向 <bdi> 元 素 


<bdi> 其 实 是 指 Bi-Direction Isolation， 也 就 
是 隔离 双向 文字 走向 。 

中 文 或 英文 在 横向 书写 时 ， 皆 是 由 左 到 
右 ， 但 是 有 些 语言 ， 例 如 希 伯 来 文 或 阿拉 伯 
文 ， 书 写 方向 是 由 右 到 左 ， 即 使 用 编辑 程序 编 
辑 希 伯 来 文 或 阿拉 伯 文 时 ， 从 输入 第 2 个 字 
起 ， 该 字 将 被 自动 放 在 前 一 个 字 的 左边 。 如 果 
所 编 文 件 是 中 文 或 英文 交 杂 着 阿拉 伯 文 或 希 伯 
来 文 时 ， 就 会 有 文字 方向 的 错乱 ， 使 用 <bdi> 
元 素 可 以 避免 此 状况 。 

值得 注意 的 是 目前 IE 尚未 支持 此 元 素 ， 不 
过 Google Chrome 和 Opera 则 支持 该 元 素 。 
程序 实例 ch3_21.html : <bdi> 元 素 的 应 用 。 这 
个 程序 第 12 行 的 希 伯 来 文英 文字 意 是 Mary。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch3 21.html</title> 
6 </head> 

7 <body> 

8 <h2> 深 石 软件 下 载 者 姓名 和 年 零 </h2> 


9 <p> 

19 <bdi> 约 进 </bdi>;18<br> 

11 <bdi>peter</bdi>:21<br> 
12 <bdi>' ”nc/bdi>:29cbry 

13 </p> 

14 </body> 

15 </html> 


下 图 所 示 为 ch3_21.html 在 支持 
<bdi> 元 素 的 Google Chrome 中 的 执行 结果 。 


深 石 软件 下 载 者 姓名 和 年 龄 | 


下 图 所 示 为 ch3_21.html 在 不 支 
持 <bdi> 元 素 的 正 中 的 执行 结果 。 


aa 


深 石 软件 下 载 者 姓名 和 年 龄 


约翰 :18 
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浏览 器 可 以 根据 网 页 所 用 语言 判断 文字 的 走 
向 。<bdo> 元 素 可 以 直接 利用 dir 属性 设 定 文字 
走向 ， 格 式 如 下 : 


<bdo dir="direction"> … 


direction 可 取 下 列 值 : 
ltr : 由 左 到 右 。 
rtl : 由 右 到 左 。 


程序 实例 ch3_22.html : <bdo> 元 素 的 应 用 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 


</bdo> 


指定 文字 走向 <bdo dir="direction "> … </bdo> 


5 <title>ch3_22.html</title> 

6 </head> 

7 <body> 

8 <p> 

9 <bdo dir="ltr">DeepStone</bdo><br> 
19 <bdo dir="rtl">DeepStone</bdo> 

11 </p> 

12 </body> 

13 </html> 


DeepStone 
enotSpeeD 


3=2il 


使 用 <ruby> 元 素 可 以 为 每 个 汉字 加 上 注音 
或 拼音 ， 此 外 ， 我 们 也 可 以 利用 这 个 功能 为 汉字 
加 上 英文 拼音 。 本 节 将 讲解 这 方面 的 应 用 。 

<ruby> 元 素 主要 用 于 标示 拼音 的 范围 。 

<It> 元 素 是 <ruby> 元 素 的 子 元 素 ， 放 置 的 
是 拼音 。 

<rp> 元 素 是 <ruby> 元 素 的 子 元 素 ， 当 浏览 
器 不 支持 <ruby> 元 素 时 ， 就 显示 <rp> 元 素 中 
的 内 容 ; 如 果 浏 览 器 支持 <ruby> 元 素 ， 就 不 显示 
<Ip> 元 素 中 的 内 容 。 早 期 Google Chrome 和 Opera 
浏览 器 尚未 支持 拼音 功能 时 ， 这 个 元 素 还 很 有 
用 ， 但 是 现在 这 个 功能 比较 少 用 了 ， 因 为 笔者 
测试 目前 几乎 所 有 主要 浏览 器 ， 如 正 、Google 
Chrome、Opera、Safari 和 Firefox 均 已 支持 此 功 
能 了 。 
程序 实例 ch3_23.html : <ruby> 和 <rt> 元 素 的 
应 用 。 本 程序 会 为 “明志 科大 ”加 上 注音 ， 同 时 
也 为 “明志 ”加 上 英文 拼音 。 


标示 注音 或 拼音 <ruby>、<rt> 和 <rp> 元 素 


1 <!doctype html> 
2 <html> 
3 <head> 
<meta charset="utf-8"> 
<title>ch3_23.html</title> 
</head> 
<body> 
<p> 
<ruby> 明 志 科 大 <rt> 门 一 上 ”出 ”三 为 Y </ rt></ruby><br> 
19 <ruby> 了 明志 <rt>Ming Chi</rt></ruby> 
11 </p> 
12 </body> 
13 </html> 


明寺 和 大 由 
明志 


ov ou 请 


避 


上 图 是 浏览 器 支持 注音 的 状况 ， 如 果 遇 上 
浏览 器 不 支持 时 ， 可 考虑 使 用 下 面 的 程序 实例 实 
现 。 下 例 处 理 的 情况 是 当 浏览 器 不 支持 注音 功能 
时 ， 列 出 括号 内 的 内 容 。 
程序 实例 ch3_24.html : 加 上 <mp> 元 素 ， 重 新 


HTML5+CSS3 王者 归来 


设计 ch3_23 html。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch3_24.html</title> 
</head> 
7 <body> 
8 <p> 
9 <ruby> 
19 明志 科大 <rp>(</rp><rt> 门 一 上 人 ”出 ”本 为 Y </rt><rp>)</rp> 
11 </ruby><br> 


ww 


a 


12 <ruby> 

13 明志 <rp>(</rp><rt>Ming Chi</rt><rp>)</rp> 
14 </ruby> 

15 </p> 

16 </body> 

17 </html> 


由 于 目前 主要 浏览 器 均 已 支持 <ruby> 和 
<rt> 元 素 组 成 的 标示 注音 或 拼音 功能 ， 所 以 这 个 
程序 的 执行 结果 与 ch3_23.html 相同 。 


| 3=22 | 上 标 <sup> 和 下 标 <sub> 元 素 


<sup> 元 素 是 上 标 元 素 ， 最 常用 作 数 学 的 次 
方 ， 例 如 ，X 代表 XX 的 三 次 方 。 
<sub> 元 素 是 下 标 元 素 ， 最 常用 作 化 学 符 
号 ， 例 如， 水 的 化 学 符号 H,O。 
程序 实例 ch3_25.html : sup 和 sub 元 素 的 
应 用 。 
1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 
6 


<title>ch3_25.html</title> 
</head> 


7 <body> 

8 <p> 

9 X<sup>3</sup><br> 
10 H<sub>2</sub>0<br> 
11 </p> 

12 </body> 

13 </html> 


本 
Ho v 


EK 输出 特殊 字符 


在 设计 HTML 文件 时 难免 会 遇 上 需要 输出 空格 符 或 特殊 字符 的 情况 ， 下 表 是 常见 的 特殊 字符 及 


其 处 理 方式 。 
常见 特殊 字符 及 HTML 处 理 方式 
ss) 空格 &#160; 英镑 &pound: &#163; 
小 于 &yen: &#165; 
大 于 Reuro; &#8364 
出 引号 Rcopy; #169; 
& 和 号 Rreg; &#174; 
¢ 分 


程序 实例 ch3_26.html : 测试 实体 名 称 和 以 编码 方式 输出 空格 的 方法 。 
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1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

学 <title>ch3 26.html</title> 
6 </head> 

7 <body> 

8 <p> 

9 明志 科大 视觉 传达 系 <br> 

19 明志 科大 &nbsp; 视 觉 传达 系 <br> 
11 明志 科大 &#160;&#160; 视 觉 传达 系 <br> 
12 </p> 

13 </body> 

14 </html> 


| ne 
明志 科大 帘 这 传达 条 
明志 科大 视 党 传达 条 
上 述 程序 第 9 行 “明志 科大 ”与 “视觉 传达 
系 ” 字 符 串 间 没有 空格 ， 第 10 行 笔者 测试 空 一 
格 ， 第 11 行 笔者 测试 空 2 格 ， 读 者 可 以 自行 比 
较 它们 之 间 的 差异 。 
程序 实例 ch3_27.html : 常见 特殊 符号 输出 的 
应 用 ， 所 有 特殊 符号 均 使 用 实体 名 称 和 编码 来 
输出 。 
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1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

bE <title>ch3 27.html</title> 

§ </head> 

7 <body> 

8 <h1> 常 见 特殊 符号 输出 表 </h1> 

9 <p> 以 下 特殊 符号 均 使 用 2 种 方式 输出 </p> 
19 <p> 

11 小 于 &nbsp;&lt;&nbsp;&#68;<br> 

12 大 于 &nbsp;&et;8&nbsp;&#62;<br> 

13 引号 &nbsp;&quot;&nbsp;8#34;<br> 
14 和 号 &nbsp;&amp;&nbsp;&#38;<br> 
15 分 &nbsp;&cent;&nbsp;&#162;<br> 
16 英镑 &nbsp;&pound;&nbsp;&#163;<br> 
17 BN&nbsp;&yen;anbsp;&#165;<br> 
18 欧元 &nbsp;&euro;&nbsp;8#8364;<br> 
19 版 权 &nbsp;&copy;&nbsp;&#169;<br> 
29 注册 商标 &nbsp;&reg;&nbsp;&#174;<br> 
21 </p> 

22 </body> 

23 </html> 


常见 特殊 符号 输出 表 


下 将 到 符号 均 使用 2 种 方式 稍 出 


版 权 
注册 高 村 加 和 @ 


HTML 的 树 状 结构 


相信 读者 学 习 到 此 已 经 具备 了 一 定 的 HIML 
程序 设计 基础 了 ， 在 结束 本 节 前 ， 笔 者 想 总 结 一 
下 HTML 文 件 的 结构 知识 。 其 实 HTML 文件 就 
是 一 个 树 状 的 文件 结构 ， 整 个 文件 的 根部 就 是 
<html> 元 素 ， 在 这 个 根部 底下 分 别 是 <head> 元 素 
和 <body> 元 素 ， 而 这 两 个 元 素 底下 又 有 其 他 
元 素 。 我 们 通常 使 用 下 列 名 词 定义 元 素 之 间 
的 关系 。 

父 元 素 : 假设 A 元 素 包 含 B 元 素 ， 则 称 
A 元 素 是 B 元 素 的 父 元 素 。 例 如 ， 我 们 可 以 
说 <html> 元 素 是 <head> 和 <body> 元 素 的 
父 元 素 。 

子 元 素 : 假设 A 元 素 包 含 B 元 素 ， 则 称 


B 元 素 是 A 元 素 的 子 元 素 。 例如， 我 们 可 以 
说 <head> 和 <body> 元素 是 <html> 元素 的 
子 元 素 。 

在 继续 解释 之 前 ， 笔 者 想 举 一 个 更 详细 的 实 
例 来 说 明 HTML 的 树 状 结构 。 
程序 实例 ch3_28.html : HTML 树 状 结构 的 
说 明 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch3 28.html</title> 
6 </head> 

7 <body> 

8 <header> 

9 ”<h1>HTML 的 树 状 结构 解析 </h1> 
18 ”<h2> 页 首 区 </h2> 


HTML5+CSS3 王者 归来 


2 ection 
12 <section> 执行 结果 


13 《<h1>HTML 文 本 区 </h1> 


14 《<p> 我 的 网 页 结构 分 析 </p> HTML 的 树 状 结构 解析 
15 </section> 页 首 区 

16 <footer> 

17 <h1> 页 尾 区 </h1> OA 

18 </p><smal1> 深 石 数 位 areg;</smal1></py> WN 

19 </footer> 页 尾 区 

29 </body> 


21 </html> ss 


这 个 程序 的 重点 并 不 是 上 述 执行 结果 ， 而 是 意图 呈现 整个 树 状 结构 。 如 果 我 们 将 上 述 程序 依 树 
状 结构 分 析 ， 可 以 绘制 出 下 图 。 


西西 西昌 点 宣 


由 上 图 可 知 父 、 子 元 素 又 衍生 出 下 列 关 系 : 

子孙 元 素 : 若是 A 元 素 是 B 元 素 的 父 元 素 ， 则 所 有 B 元 素 的 更 下 层 元 素 缘 是 A 元 素 的 子孙 元 
素 。 以 上 图 为 例 ， <meta>、<title>、<header>、<section>、<footer>、<hl>、<p> 和 <small> 皆 是 
<html> 的 子孙 元 素 。 

祖先 元 素 : 若是 A 元 素 是 B 元素 的 父 元 素 ， 则 所 有 A 元 素 的 更 上 层 元 素 皆 是 B 元 素 的 祖先 元 
素 。 以 上 图 为 例 ，<body> 元 素 是 <h1>、<h2>、<p> 和 <small> 的 祖先 元 素 。 

手足 元 素 : 若是 A 元 素 是 B 元 素 和 C 元 素 的 父 元 素 ， 则 B 元 素 和 C 元 素 是 手足 元 素 。 
<header>、<section> 和 <footer> 彼此 之 间 是 手足 元 素 。 

上 述 关系 是 学 习 HTML 布局 区 块 观念 和 各 元 素 间 衍生 继承 关系 的 重要 知识 。 


| 3-25 | HTML5 不 再 支持 的 元 素 与 属性 设 定 


如 果 你 曾经 学 习 过 HIML4.01 或 更 早 版 本 ， 可 能 老师 在 教 文件 输出 时 ， 同 时 也 会 教 下 列 元 素 或 
属性 : 
。 <basefont> 元 素 : 字体 设 定 。 
。 <big> 元 素 : 放大 字体 。 
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。 ”<center> 元 素 : 文字 置 中 。 

。 <s> 元 素 : 删除 线 。 

。 <marquee> 元 素 : 跑马 灯 。 

。 background 属性 : 设计 网 页 背景 图 案 。 

。 bgcolor 属性 : 设计 网 页 背景 颜色 。 

。 text 属性 : 设计 网 页 文字 色彩 。 

之 后 你 好 像 可 以 快速 上 手 学 会 一 些 好 像 很 炫 的 功能 。 其 实 上 述 功能 皆 是 属于 网 页 外 观 设计 ， 
在 HTML5 中 以 上 功能 已 经 被 CSS3 所 取代 了 ， 笔 者 强烈 不 建议 学 习 或 使 用 上 述 已 经 停 用 的 元 素 和 
属性 。 如 果 你 在 网 页 设计 中 号 称 使 用 HTML5 设计 网 页 却 加 上 上 述 功 能 ， 虽 然 目前 各 浏览 器 凤 有 支 
持 但 是 只 会 被 认为 不 专业 ， 而 且 不 懂 HTML5 的 真正 内 涵 。 同 时 ， 未 来 如 果 新 的 浏览 器 不 支持 旧版 
HTML 元 素 时 ， 你 的 网 页 会 出 现 错误 信息 。 

W3C 协会 发 布 了 HTML5 和 CSS3， 其 最 重要 的 设计 理念 就 是 将 网 页 文件 的 内 容 与 结构 和 外 观 
设计 分 开 。 学 习 HTML5 主要 就 是 学 习 设计 文件 的 内 容 与 结构 ， 学 习 CSS3 主要 就 是 学 习 网 页 的 外 观 
设计 。 上 述 理念 主要 是 认为 一 个 完美 的 商业 网 页 设计 ， 应 由 多 人 分 工 完成 ，HTML 程序 设计 师 负责 
内 容 与 结构 ， 美 工 或 CSS 设计 师 负责 网 页 外 观 设计 。 在 HIML5 架构 下 ， 一 份 HTML 文件 已 经 可 以 
在 不 更 改 HTML 文件 内 容 的 情况 下 ， 通 过 不 同 的 CSS 设计 产生 完全 不 一 样 的 结果 ， 而 这 个 效果 的 
好 坏 也 考验 着 设计 CSS 的 设计 师 与 美工 人 员 ， 这 部 分 在 CSS 章节 笔者 会 以 实例 解说 。 总 之 ， 如 果 
我 们 在 HTMLS5 的 内 容 与 结构 中 加 入 了 已 经 弃 用 的 网 页 外 观 元素 和 属性 时 ， 就 违背 了 HTML5 真正 
的 内 涵 。 

例如 下 列 两 个 画面 最 大 的 特色 是 <body> 元 素 内 的 内 容 完全 相同 ， 笔 者 只 是 更 改 了 CSS 的 设 
计 ， 就 获得 了 两 个 不 一 样 的 结果 。 但 是 如 果 读 者 在 HTML 程序 的 <body> 内 增加 了 不 鼓励 使 用 的 元 
素 时 ， 在 修改 时 就 会 动 到 整体 HTML 的 文件 设计 。 


习题 
1. 请 设计 一 个 网 页 介绍 你 最 难忘 的 3 个 旅游 地 点 ， 内 容 可 以 自行 发 挥 。 
2. 请 设计 一 个 网 页 介绍 你 最 喜欢 的 3 种 食物 ， 内 容 可 以 自行 发 挥 。 


设计 合 超 链接 的 网 页 


本 章 摘 要 

4-1 <a> … </a> 的 基本 应 用 

4-2 ”浏览 脉络 的 设 定 

4-3 ”从 一 个 文件 跳 到 另 一 个 文件 

4-4 同一 个 HTML 文件 中 的 超 链接 

4-5 ” 设 定 联络 信息 <address> 元 素 

4-6 ”链接 到 电子 邮件 信箱 

4-7 ”引用 短文 的 实例 <cite> 元 素 与 超 链接 的 应 用 
4-8 ”指定 基准 的 URL 


因特网 超 链接 的 主要 功能 有 3 个 。 

(1 ) 从 网 络 的 某 一 个 节点 跳 到 另 一 个 节点 。 

(2 ) 从 一 个 HTML 文件 跳 到 另 一 个 HTML 文件 。 

(3 ) 在 同一 个 HTML 文件 中 ， 从 某 一 段落 跳 到 另 一 段落 。 其 实 可 将 此 用 法 称 为 书签 。 

本 章 笔 者 将 只 讲解 超 链 接 的 基本 知识 ， 更 多 的 应 用 将 在 后 面 章节 搭配 相关 的 进 阶 议题 做 更 详 
尽 的 解说 。 
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<a> 是 超 链接 元 素 ， 这 个 元 素 的 英文 全 名 是 
Anchor， 可 将 它 翻译 成 “ 锚 ”， 其 主要 目的 是 在 
单 本 设置 的 超 链 接 后 ， 可 以 跳 到 指定 网 络 节 点 位 
置 。 在 Internet 中 节点 的 位 置 ， 也 就 是 Internet 
地 址 ， 我 们 称 之 为 URL (Universal Resource 
Locator)。<a> 元 素 的 基本 使 用 方式 如 下 : 


<a href="URL"> … </a> 


口 _ href 


超 链接 的 URL。 
程序 实例 ch4_1.html : 分 别 建立 两 个 超 链接 ， 
使 得 单 击 超 链接 后 可 以 分 别 进入 深 石 数字 或 
Silicon Stone 公司 的 网 页 。 


1 <ldoctype html> 
2 <html> 

3 «<head> 

4 <meta charset="utf-8"> 

5 <title>ch4_1.html</title> 

6 </heady> 

7 <body> 

8B 《py 

日。 ka href-"http://wnw.deenstone.com,ty"> 深 石 数字 </a> 

19 </p> 

11 «p> 

12 <a href="http://www. siliconstone. com">Silicon Stone Educationc/ay 
13 </p> 

14 </body> 

15 </html> 


下 图 是 4_1html 刚 执行 时 的 画面。 


<a> … </a> 的 基本 应 用 


滩 五 数字 
a 


将 鼠标 指针 指向 “ 深 石 数字 ”鼠标 指针 变 
为 手 形 ， 窗 口 左 下 角 会 列 出 深 石 数字 的 超 链接 
地 址 ， 如 下 图 所 示 ， 单 击 后 将 进入 深 石 数字 公 
司 网 页 。 


和 和 


httpV/www deepstone com/ 
将 鼠标 指针 指向 “Silicon Stone Education”， 
鼠标 指针 变 为 手 形 ， 窗 口 左下 角 会 列 出 Silicon 
Stone Education 的 超 链接 地 址 ， 如 下 图 所 示 ， 单 
击 后 将 进入 Silicon Stone 公司 网 页 。 
i 
Sieon Stong Edeation 


hmpy//www siliconstone com/ 


超 链 接 被 浏览 过 后 ， 超 链接 文字 改 成 以 紫色 


i116 


二 1166 ~ = 


用 浏览 脉络 的 设 定 


所 谓 的 浏览 脉络 (Browsing Context) 是 指 
开启 浏览 器 页 面 的 方式 ， 此 时 我 们 可 以 在 <a> 元 
素 的 使 用 方式 内 增加 target 属性 。 

<a href="URL" target="target 


Value"n> … </a> 


口 target 


属性 值 可 以 是 下 列 几 种 : 
_self : 在 目前 的 浏览 页 面 下 显示 ， 这 是 系统 


默认 值 。 

_blank : 在 现成 的 浏览 器 下 新 增 一 个 浏览 
页 面 。 

_parent : 如 果 目 前 的 页 面 有 父 层 级 ， 则 在 父 
层级 页 面 显 示 。 

_top : 在 目前 浏览 器 的 最 顶端 显示 。 
程序 实例 ch4_2.html : 采用 _blank 和 _self 重 
新 设计 ch4_1.html 中 的 超 链接 。 
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1 <ldoctype html> 

2 <html> 

3 chead> 

4 tmeta charset="utf-8"> 

5 <title>ch4 2.htnlc/title> 
6 </head> 

7 <body> 


13 <a href="http://rmw.siliconstone.cou” target-” blank"> 
14 Silicon Stone Education</a> 

15 </p> 

16 </body> 

17 </html> 


执行 结果 


Silicon Stone Education 


hapywmwedeepstonecamawy 


单 击 超 链接 之 后 ， 将 用 原来 的 页 面 显示 深 石 
数字 公司 网 页 ， 如 下 图 所 示 ， 方 法 与 实例 ch4_1. 


html 相同 。 


忆 DeopSrone 录 石 如 位 科 持 


BDeeglLearning 


深度 全 加 .滴水 共 有 


now = 


单 击 浏览 器 窗口 左上 角 的 @ 图 标 ， 可 以 
返回 原来 的 ch4 2.html 页 面 。 若 是 单 击 Silicon 
Stone Education 超 链接 ， 如 下 图 所 示 。 


Ez=EE3 


Se 


hmpy/www siliconstonecory 16% 。 


可 在 浏览 器 内 增加 一 个 新 的 页 面 来 显示 
Silicon Stone Education 公司 的 网 页 。 


ae Be 
3 芥 - 国 -3 种 -asR 


# 贡 Siliton Stone 


131415 


20 "Botos alyst 


一 上 二 > 9101112 
ot nA Al ea 


从 一 个 文件 跳 到 另 一 个 文件 


在 建立 网 页 时 ， 我 们 很 可 能 为 网 页 内 容 建 立 许多 页 面 ， 每 一 个 页 面 其 实 就 是 一 个 HIML 文件 。 
这 一 节 我 们 将 从 相对 路 径 下 各 种 可 能 状况 (4-3-1 ~ 4-3-3 节 ) 与 绝对 路 径 〈4-3-4 节 ) 两 方面 说 明 如 
何在 显示 一 个 页 面 时 ， 用 超 链 接 跳 到 另 一 份 HTML 文件 页 面 。 


4-3--1 超 链接 的 HTML 文件 在 同一 个 文件 夹 


这 是 最 简单 也 最 实用 的 状况 ， 所 有 的 HTML 文件 皆 在 同一 个 文件 夹 。 一 般 是 用 在 小 型 网 页 设计 
中 。 以 <a> 元 素 而 言 ， 我 们 可 以 修改 使 用 格式 如 下 : 


<a href="HTML-file"> … </a> 


接 下 来 的 实例 ch4_3.html 主要 以 笔者 计算 机 中 的 数据 结构 为 基础 ， 如 下 图 所 示 。 


程序 实例 ch4_3.html : 这 个 程序 包含 ch4 3. 
html、bigdata.html 和 photography.html 等 文件 ， 
同时 这 3 个 HTML 文件 是 在 同一 个 文件 夹 ch4 
中 。 主 要 HTML 文件 是 ch4_3.html， 程 序 执行 
时 会 列 出 Big Data Series 和 Photography 这 两 
个 超 链接 ， 单 击 Big Data Series 超 链接 将 进入 
bigdata.html 文件 页 面 。 单 击 Photography 超 链接 
将 进入 photography.html 文件 页 面 。bigdata.html 
文件 页 面 和 photographyhtml 文件 页 面 缘 有 一 个 
Back 超 链接 ， 单 击 后 可 以 返回 ch4_3.html 文 件 
页 面 。 


1 <ldoctype html> 
2 <htnl> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch4_3.html¢/title> 

6 </head> 

7 <body> 

8 <h1>silicon Stone Education</h1> 

9 <p>5i1icon Stone 公 司 位 于 美国 加 州 ， 是 一 所 权威 性 

19 ”的 国际 认证 公司 ， 下 列 是 其 中 2 大 考 科 .</p> 

11 <p> 

12 <a href="bigdata.htm]"><h3>Big Data Series</h3></a> 
13 </p> 

14 <p> 

15 <a href="photography.html"><h3>photography</ha></ay 
16 </p> 

17 </body> 

18 </html> 


bigdata.html 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <title>bigdata.html</title> 

6 </head> 

7 <body> 

8 <ha>Big Data series</hay 

9 <p> 

9 大 数据 (Big Data) 己 成 为 目前 全 球 学 术 单位 、 政 府 栅 关 以 及 
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11 顶级 企业 必须 认真 面 对 的 挑战 ， 随 着 有 关 大 数据 的 程序 诺言 
12 运算 平台 、 基 础 理论 ， 以 及 座 拟 化 、 容 器 化 技术 的 成 熟 ， 了 解 
13 大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 趋势 , 将 会 是 求 
14 学 、 运 修 、 求 职 ， 深 造 的 必 各 技能 。 

15 </p> 

16 <a href-"ch4_3.html"><h4>Back</h4></a> 

17 </body> 

18 </html> 


photography.html 
1 xldoctype html> 
2 <html> 
3 <xhead> 
4 《meta charset="utf-8"> 
5 <title>photography.htnl</title> 
6 《/head> 
7 xbody> 
8 <h3>photography</h3> 
9 <p> 
19 在 高 阶 摄影 器 才 门 坎 降低 ,摄影 信息 笃 于 可 得 的 现在 , 拥 
11 有 一 张 国 际 性 、 茶 获 业界 一 致 推荐 的 职业 能 力 鉴定 证 书 ， 
12 更 能 让 您 在 竞争 激烈 的 摄影 战场 上 立即 出 线 ! 不 论 在 国 
13 内 外 职场 上 都 将 更 具 竞争 力 ， 为 未 来 的 职业 生涯 勿 路 
14 </p> 
15 《a href="chd_ 3,.html"><h4>Back</h4></a> 
15 </body> 
17 </html> 


Silicon Stone Education 
Seen See 公司 位 于 美国 各州, 是 一 所 权 娄 性 的 国际 认证 公司 ， 下 列 是 其 中 2 大 考 科 。 


‘ie Data figries 
Phetoeraphy 


如 果 单 击 Big Data Series 超 链接 ， 可 以 进入 


bigdata.html 文件 页 面 。 
ie Data Series 
基数 类 (8 法 Data) 已 成 为 目前 全 球 学 术 单 位 、 政府 机 关 以 及 项 级 企业 必须 认真 丽 对 的 掀 战 随 
著 有 关 大 茹 涯 的 程序 褒 言 ”运算 于 台 ` 基础 理论 , 以 及 谨 机 化 、 灾 着 化 技 ; 


| 
术 的 世 露 ， 了 解 大 | 
天 至 、 详 作 工具、 应 洒 以 平和 ， 交 会 吓 于 学 汉 条 "来 杖 ， 环 时 的 必 兰 技 荡 。| 


如 果 单 击 Back 超 链 接 ， 可 以 返回 ch4_3. 
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html 文件 页 面 。 下 图 是 另 一 个 执行 结果 页 面 。 


Silicon Stone Education 


Silieon Stone 公 司 位 于 美国 加 州 ， 是 一 所 权 践 性 的 国际 认证 公司 ， 下 列 是 其 中 2 大 考 科 


如 果 单 击 Photography 超 链接 ， 可 以 进入 
photography.html 文件 页 面 。 


4-3-2 ， 超 链接 的 文件 在 子 文件 夹 


在 设计 大 型 网 站 时 ， 网 页 通常 是 由 许多 的 HTML 文件 所 组 成 ， 


Photography 


在 高 阶 摄影 器 才 门 坎 降低 ， 摄影 信息 季 手 可 得 的 现在 ， 拥 有 一 洲 国际 性 ， 荣获 业界 一 致 迫 荐 
委 半 好 太 书 ， A 不 论 在 国内 外 职场 上 都 


如 果 单 击 Back 超 链 接 ， 可 以 返回 ch4 3. 
html 文件 页 面 。 


一 页 最 上 层 的 网 页 可 能 有 许多 超 


链接 ， 每 一 页 超 链接 又 可 能 会 有 其 他 好 几 个 更 深 一 层 的 超 链 接 。 为 了 管理 这 些 HTML 文件 ， 网 页 的 
程序 设计 师 会 将 HTML 文件 依 层次 建立 在 不 同 的 子 文件 夹 内 。 
在 设计 网 页 时 ， 要 引用 到 目前 文件 夹 的 子 文件 夹 ， 可 以 使 用 下 列 方法 ， 这 样 整个 设计 就 简单 多 了 。 


<a href="subfolder/HTML-file"> … 


</a> 


subfolder 是 指 子 文件 夹 名 称 。 下 一 节 将 介绍 的 实例 ch4_4.html 以 笔者 计算 机 中 的 数据 结构 为 基 
础 ，ch4_4.html 位 于 ch4 文件 夹 ，bigdata.html 和 photography.html 文件 在 ch4 文件 夹 下 的 child 子 文 


件 夹 中 ， 如 下 图 所 示 。 


上 述 数据 结构 将 衍生 一 个 问题 ，bigdata.html 和 photography.html 文件 将 如 何 定义 超 链接 返回 父 


文件 夹 ch4 的 ch4_4.html 文件 ? 


4-3-3 超 链接 的 文件 在 父 文件 夹 


若 想 返 回 父 文件 夹 ， 基 本 上 只 要 在 连接 文件 
前 方 加 上 “../” 即 可 ， 此 时 <a> 元 素 的 使 用 格式 
如 下 : 


<a href=". -./HTML-file"> … 


程序 实例 ch4_4.html : 这 个 程序 执行 的 结果 和 


ch4_3.html 相同 ， 所 以 不 再 列 出 结果 ， 在 此 笔者 
仅 列 出 程序 实例 ch4_4.html 与 ch4 3.html 不 相 


</a> 


同 的 内 容 。 
了 Tn "child/bigdata.html"><h3>Big Data Series</h3></a> 
13 </p> 
14 <p> 
15 <a href="child/photography.html"><h3>Photography</h3></a> 
16 </p> 

请 读者 留意 第 12 行 与 第 15 行 超 链接 到 子 文 
件 夹 的 语法 。 

bigdata.html 与 photography.html 返回 到 父 文 
件 夹 超 链接 的 语法 相同 ， 如 下 所 示 : 
<a href="。。./ch4 4.html"><h4>Back</h4></a> 


4-3-4 绝对 路 径 


一 般 网 页 设计 较 少 使 用 绝对 路 径 ， 主 要 原 
是 只 要 未 来 HTML 文件 所 在 的 工作 文件 夹 有 
更 动 ， 相 关 的 超 链接 就 可 能 出 错 。 不 过 本 书 为 
了 讲述 完整 的 知识 ， 笔 者 在 此 还 是 举例 说 明 。 其 
实在 ch4_3.html 的 执行 结果 中 ， 当 鼠标 指针 指向 
超 链接 文字 时 ， 窗 口 左 下 角 的 网 址 就 是 绝对 路 径 
的 网 址 。 


Silicon Stone Education 


Silicon Stone 公 司 位 于 美国 加 州 ， 是 一 所 权威 性 的 国际 认证 公司 ， 下 列 是 其 中 2 大 考 科 * 


使 用 绝对 地 址 设 定 超 链接 ， 则 <a> 元 素 格 
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式 如 下 : 
<a href="file:///disk:/subfolder 
… /HTML-file"> … </a> 
“file:///” 是 绝对 地 址 的 定义 格式 ，disk 是 
指 驱 动 器 号 。 在 disk 和 subfolder 之 间 的 “:/” 符 
号 也 可 以 使 用 “|” 取 代 。 


程序 实例 ch4_5.html : 使 用 绝对 地 址 重新 设计 
ch4 3.html， 下 面具 列 出 程序 代码 与 ch4_3.html 
不 相同 的 地 方 。 

11 <p> 

12 <a href="file:///d:/HIMLS+CSS3/ch4/bigdata. html"> 

13 <h3>Big Data Series</h3></a> 

14 </p> 


15 <p> 

16 <a href="fite:///d:/HTML5+CSS3/ch4/photographyshtmt'> 
17 <h3>photography</h3></a> 

18 </p> 


请 读者 重点 关注 上 述 程序 的 第 12 和 16 行 。 


同一 个 HTML 文件 中 的 超 链接 


有 时 可 能 所 建立 的 网 页 内 容 分 常 丰富 ， 一 
HTML 文件 就 需 涵盖 好 多 内 容 ， 此 时 可 以 考虑 
在 这 个 HTML 文件 内 建立 几 个 书签 ， 这 样 只 要 
单 击 这 些 书 签 超 链接 ， 即 可 跳 到 书签 地 址 。 这 时 
的 <a> 元 素 格式 如 下 : 

<a href="#mybookmark"> 


上 述 mybookmark 是 我 们 自行 定义 的 书签 名 
称 ， 接 着 在 同一 个 HTML 文件 内 目标 书签 位 置 
使 用 id 属性 设 定 mybookmark， 这 样 才 可 定义 完 
成 超 链接 。id 属性 是 一 种 全 局 属性 ， 可 以 在 许 
多 元 素 内 使 用 ， 为 了 凸显 书签 ， 通 常 可 以 将 它 使 
用 在 <hn> 标题 标记 内 。 下 列 是 将 超 链 接 设 定 为 
“Big Data”， 书 签名 称 是 “Big Data Series” 的 
程序 片段 。 


<a href="#Big Data">Big Data</a> 


.</a> 


<h3 id="Big Data">Big Data 
Series</h3> 

经 上 述 设 定 后 ， 当 单 击 Big Data 超 链接 ， 
就 可 以 跳 到 Big Data Series 书签 所 在 位 置 。 
们 过 去 在 HTML4.01 版 ，<a> 标记 内 可 以 使 

用 name 属性 来 设 定 书签 名 称 ，HTML5 已 


经 不 支持 了 ， 改 用 id 属性。 
程序 实例 ch4_6.html : 同一 个 文件 中 超 链接 的 
应 用 。 
1 <!doctype html> 
2 <html> 
3 <head> 


4 <meta charset="utf-8"> 

5 <title>ch4_6.html</title> 

6 </head> 

7 <body> 

8 <header> 

9 <p id="top">Top</p> 

10 <hl>Silicon Stone Education</h1> 

11 <p>Silicon Stone 公 司 位 于 美国 加 州 ， 是 一 所 权威 性 
12 的 国际 认证 公司 ， 下列 是 其 中 2 大 考 科 。 </p> 

13 <h3><a href="#Big Data">Big Data</a> 

14 <a href="#Data Analyst">Data Analyst</a></h3> 
15 </header> 
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16 <hr> 

17 <section> 

18 <h3 id="Big Data">Big Data Series</h3> 
19 <p>Big Data Knowledge Today</p> 

20 <p>R Language Today</p> 

21 <p>SAS Knnowledge Today</p> 

22 <a href="#top">Return Top</a> 

23 </section> 

24 <br><br><br> 

25 <section> 

26 <h3 id="Data Analyst">Data Analyst Series</h3> 
27 <p>Statistical Knowledge Today</p> 

28 <p>Data Power Today</p> 

29 <p>Data Analysis Using Excel</p> 

30 <a href="#top">Return Top</a> 

31 </section> 

32 </body> 

33 </html> 


程序 执行 时 可 以 看 到 两 个 超 链 
接 ， 分 别 是 Big Data 和 Data Analyst。 


>]| 


Top 
Silicon Stone Education 

Silicon Stone 公 司 位 于 美国 0H| ,是 一 所 权 四 性 的 国际 认证 公司 ,下列 是 其 中 ?大寺 科 - 
Blejata Data Analyst 

Big Data Series 


Big Data Knowledge Today 


EO CS SN i Dts 


单 击 Big Data 超 链接 可 以 跳 到 Big Data 
Series 书签 ， 让 此 书签 数据 跳 到 窗口 最 上 方 ， 如 
下 图 所 示 。 


Big Data Series 届 
Big Data Knowledge Today 

RLanguage Today 

SAS Kanowledge Today 


四 


Data Analyst Series 
单 击 Retum Top 超 链接 可 以 跳 到 Top 书 
签 ， 窗 口 显示 页 面 最 顶端 。 


Tp 认 
Silicon Stone Education 

Silicon stone 公司 位 于 美国 加州， 是 一 所 权威 竹 的 国际 证 外 公司 ， 下 列 是 其 中 2 大 考 科 
Data Data Apalvst 


Big Data Series 
Big Data Knowiedge Today 


如 果 这 时 单 击 Data Analyst 超 链接 ， 窗 口内 
容 将 移 至 Data Analyst Series 书签 ， 如 果 这 个 书 
签 内 容 或 其 后 面 的 内 容 够 多 ， 则 这 个 书签 将 在 窗 
口 画面 最 上 端 显示 。 和 否则 只 是 将 窗口 卷 动 到 最 下 
方 ， 如 下 图 所 示 。 


SAS Kanowiedee Today 人 
Retom Top 


当然 ， 若 是 单 击 Return Top 超 链接 可 以 跳 到 
Top 书签 ， 窗 口 显示 页 面 最 顶端 。 这 个 程序 设计 
的 几 个 重点 如 下 : 

(1) 第 9 行 设 定 Top 书 签 区 块 ， 供 Big 
Data Series 书签 区 块 和 Data Analyst Series 书签 
区 块 在 单 击 Return Top 时 可 以 返回 。 

(2) 第 13 行 设 定 Big Data 超 链接 ， 目 的 
是 可 以 跳 至 Big Data Series 书签 区 块 。 

(3) 第 14 行 设 定 Data Analyst 超 链 接 ， 目 
的 是 可 以 跳 至 Data Analyst Series 书签 区 块 。 

(4) 第 17 行 到 23 行 是 设 定 BigData 
Series 书签 区 块 。 

(5) 第 25 行 到 31 行 是 设 定 Data Analyst 
Series 书签 区 块 。 


设 定 联络 信息 <address> 元 素 


这 个 元 素 主要 用 于 显示 个 别 内 容 或 是 整个 网 站 内 容 的 联络 信息 。 在 设计 网 页 时 ， 有 时 需要 在 网 


页 下 方 放置 联络 信息 ， 便 可 以 使 用 这 个 元 素 。 


程序 实例 ch4_7.html : <address> 元 素 的 应 用 。 这 个 程序 在 执行 时 若是 单 击 “ 与 客服 人 员 联 络 ” 超 


链接 ， 便 可 进入 美国 的 Silicon Stone 网 页 。 


1 
2 
3 
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<ldoctype htmly /二 J 十 
<html> 执行 结果 


<head> 
‘<meta charset="utf-8"> a . 
<title>ch4 7.html</title> Silicon Stone Education 
</head> 
<body> silicon Sione 公 司 位 于 基 国 各州， 是 一 所 权 三 性 的 国 际 认证 公司 * 
<header> 


<hl>silicon stone Education</hi> 
<p>Silicon Stone 公 司 位 于 美国 加 州 ， 是 一 所 权威 性 的 国际 认证 公司 。</p> 
</header> 
<footer> 
<address> 欢 迎 到 本 公司 网 页 
<a href="http://www.siliconstone .com"> 与 客服 人 员 联 络 </a> 
</address> 
</footer> 
</body> 
</html> 


NI6% > 


| 4-6 | 链接 到 电子 邮件 信箱 


HTML 也 人 允许 超 链接 直接 链接 到 电子 邮件 信箱 ， 使 用 方法 如 下 : 

<a href=Mailto: 电子 邮件 地 址 > … </a> 

此 外 ， 也 可 以 在 电子 邮件 地 址 后 面 加 上 参数 实现 用 特别 方式 发 送 邮件 。 
主题 : ?subject= 信件 标题 。 

副本 : ?cc= 副本 收 件 者 电子 邮件 地 址 。 

密 件 抄 送 : ?bcc= 密 件 抄 送 收 件 者 地 址 。 

邮件 内 容 : ?body= 邮件 内 容 。 


程序 实例 ch4_8.html : 重新 设计 程序 实例 ch4_7.html， 将 超 链接 导向 电子 邮件 信箱 ， 同 时 附 上 不 同 
参数 实现 用 特别 方式 来 发 信 上 邮件 。 读 者 应 该 分 别 单 击 以 体会 结果 。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


</head> 
<body> 
<header> 


1 

2 

3 

4 

E, <title>ch4_8.html</title> 
6 

7 

8 


9 <h1>silicon Stone Education</h1> 


18 ”<p>Silicon Stone 公 司 位 于 美国 加 州 ， 是 一 所 权威 性 的 国际 认证 公司 。</p> 

11 </header> 

12 <footer> 

13 ”xaddress>> 欢 迎 到 本 公司 网 页 <br> 

14 <a href="Mailto:test@sillicon,com"> 与 客服 联络 (标准 )</a><br> 

15 <a href="Mailto:test@si .com?subject=Question"> 与 客服 联络 (增加 主题 )</a><br> 
16 <a href="Mailto:test@si .com?cc=aaa@si ,com"> 与 客服 联络 (增加 副本 )</a><br> 

17 <a href="Mailto:test@si .com?bcc=bbb@si,com"> 与 客服 联络 (增加 密 件 副本 )</a><br> 
18 <a href="Mailto:test@si .com?body=Hello1"> 与 客 骤 联络 (增加 邮件 内 容 )</a><br> 
19 </address> 

26 </footer> 

21 </body> 

22 </html> 


下 图 是 进入 网 页 及 单 击 各 个 超 链接 后 的 执行 效果 。 
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Silicon Stone Education 局 | 上- ma | 
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Silicon Stone 公 司 位 于 美国 加 州 ， 是 一 所 权威 性 的 国际 认证 公司 nzo 1 | 多 | 上 
Fa | wo- 
司 ET 
a 到 
引 1 习 
RE 加 on 回 加 
-4 | | BM - 5 | |_sfaw- | 
和 | af 二。 [eeaeom py 让 者。 | [ts ] 


Pio 
© 
tua 


对 庆 | 引用 短文 的 实例 <cite> 元 素 与 超 链 接 的 应 用 
在 3-12 节 笔者 曾经 讲 过 可 以 用 <cite> 元 素 引用 短文 ， 下 面 举 一 个 实例 。 
程序 实例 ch4_9.html :<cite> 元 素 与 超 链接 的 应 用 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch4 9.html</title> 
6 </head> 

7 

8 


9 <cite> 

19 <a href="bigdata,html"> 大 数据 </a> 
11 已 经 成 为 未 来 企业 发 展 重 要 的 资源 

12 </cite> 

13 </p> 

14 </body> 

15 </html> 


单 击 下 图 所 示 的 “大 数据 ” 超 链接 可 跳 至 <cite> 所 参考 的 bigdata.html 文件 。 


式 疙 称 已 络 成 为 天 天 企业 发 恬 委 更 5 莹 源 


呈 : 调 指定 基准 的 URL 


至 今 本 书 所 有 URL 皆 是 以 目前 HTML 文件 的 地 址 为 基准 。 

HTML 内 有 <base> 元 素 ， 这 个 元 素 可 以 设 定 URL 的 基准 ， 执 行 这 个 元 素 设 定 的 URL 基准 后 ， 
未 来 所 有 相对 的 URL 皆 以 此 为 基准 。 这 个 元 素 必须 放 在 <head> 元 素 内 ， 且 一 个 <head> 元 素 只 能 有 
一 个 <base>。 这 个 元 素 的 使 用 格式 如 下 : 

<base 属性 > 


口 href 

以 绝对 地 址 设 定 HTML 文件 的 基准 。 
OD target 

属性 值 可 参考 4-2 节 。 


程序 实例 ch4_10.html : <base> 元 素 的 测试 。 
这 个 程序 在 第 6 行 会 先 将 ch4/child 设 为 URL 的 
基准 ， 由 于 基准 为 子 文件 夹 ch4， 所 以 程序 第 9 
行 即 使 是 引用 同文 件 夹 的 超 链 接 ， 此 URL 也 需 
使 用 “../basetest.html” 定 义 。 


1 《ldoctype html> 

2 <html> 

3 <head> 

<meta charset="utf-8"> 

<title>ch4_19.html</title> 

<base href="file:///D: /HT 5+Css3/cha/child/basech4 10.htm]"> 
7 </head> 

8 <body> 

9 <p>Base 测 斌 ca href="., /basetest.html">basetest</a> 应 该 在 ch4 文 件 夹 </p> 
19 </body> 

11 </html> 


4 
5 
6 
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程序 child/basech4_10.html : 位 于 ch4 的 子 
文件 夹 child， 它 的 内 容 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>basech4_10.html</title> 
</head> 
<body> 
<hl>Benchmark for ch4_10.html</hi> 
</body> 
</html> 


程序 basetesthtml : 与 ch4_10.html 相同， 
位 于 ch4 文件 夹 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>basetest.html</title> 
6 </head> 

7 <body> 

8 <p> 测 试 成 功 </p> 

9 </body> 

19 </html> 


加 四 四 vaowmhwnp 


~ 


Base 测 斌 baselie( 应 该 在 ch 文件 夹 
fleVWDYHTML5+CSS3/ch4/basetesthtr 抽 116% vv - 


测试 成 功 


习题 


1. 请 设计 一 个 网 页 介绍 自己 的 求学 履历 ， 使 其 可 以 超 链接 到 所 读 小 学 、 初 中 和 高 中 学 校 的 网 页 ， 其 


他 内 容 可 自行 发 挥 。 
2. 请 挑选 3 种 不 同 风格 的 音乐 主题 ， 每 一 种 主题 挑 
同 风格 的 音乐 主题 网 页 。 


5 首 歌曲 ， 请 设计 一 个 网 页 可 以 从 主 网 页 跳 至 不 


» 


制作 项 目 列表 


本 章 摘 要 

5-1 点 符 列表 

5-2 ”有 编号 的 项 目 列表 

5-3” 设 定 有 编号 项 目 列表 的 起 始 编号 
5-4 ”更 改 项 目 列表 的 连续 编号 

5-5 更改 项 目 列表 的 编号 种 类 

5-6 ”项 目 列表 编号 递减 的 应 用 

5-7 自 定义 清单 


项 目 列表 有 两 大 类 ， 一 类 是 点 符 列表 ， 另 一 类 是 编号 列表 ， 本 章 将 以 实例 讲解 这 两 方面 的 
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| 5-1 点 符 列表 


点 符 列表 一 般 用 在 顺序 不 重要 的 条 列 式 数据 
中 ， 该 元 素 的 使 用 格式 如 下 : 


<ul><1i> … </1Li></ul> 


由 于 点 符 列表 可 有 许多 条 ， 通 常 又 将 上 述 格 
式 以 下 列 方式 表达 。 
<ul> 
<1i> 清单 1</1i> 
<1i> 清单 2</1i> 


<1i> 清单 n</1i> 

</ul> 

一 般 浏览 器 在 执行 这 个 元 素 时 ， 会 在 条 列 
式 数 据 前 加 上 黑色 中 国 点 符号 “。”。 在 HTML 
4.01 中 ，<ul> 有 type 属性 可 以 更 改 实心 圆 点 符 
号 “。”HTML5 已 经 取消 对 此 的 支持 ， 取 而 代 
之 的 是 CSS 的 list-style-type 或 list-style， 本 书 将 
在 13-1 节 和 13-4 节 说 明 这 两 个 属性 的 使 用 方法 。 
程序 实例 ch5_1.html : 以 项 目 符号 列 出 访问 过 
的 地 点 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 
5 <title>chs_1,html</title> 
6 </head> 

7 <body> 

8 <h1> 我 的 旅游 经 历 </h1> 

9 <ul> 

19 。 《1i> 南 极 大 陆 </1i> 

11 《li> 北 极 海 (/1i> 

12 ”<li> 中国 西藏 </1i> 


13 ”<li> 划 直 </1i> 
14 </ul> 

15 </body> 

16 </html> 


我 的 旅游 经 历 


程序 实例 ch5_2.html : 以 点 符 列表 方式 重新 设 
计 ch4_6.html。 下 面 将 只 列 出 与 ch4_6.html 代码 
的 不 同 之 处 。 


13 <ul> 

14 <li><h3><a href="#Big Data">Big Data</a></h3></li> 

15 <li><h3><a href="#Data Analyst">Data Analyst</a></h3></li> 
16 </ul> 


Top 
Silicon Stone Education 
Silicon Sione 公 司 位 于 美国 加 州 ， 是 一 所 权威 性 的 国际 认证 公司 ， 下 列 是 其 中 2 大 考 科 ， 
4 Big Data 
。 Data Analvst 


Big Data Series 
Big Datn Knowledge Today 
RLanguage Today 


很 明显 ， 上 图 中 的 两 个 超 链 接 文字 尽管 仍然 
保持 是 h3 的 标题 格式 ， 但 是 已 加 上 本 节 介 绍 的 点 
符 列表 符号 了 。 


| 5-2 | 有 编号 的 项 目 列表 


有 些 列表 数据 需要 强调 它 的 顺序 ， 那 么 就 
建议 使 用 本 节 所 述 的 功能 。 相 关 元 素 的 使 用 格 
式 如 下 : 


ol * Xfis/ol> 


由 于 编号 列表 有 许多 条 ， 通 常 又 将 上 述 格式 
以 下 列 方式 表达 。 
<ol> 
<1i> 清单 1</1i> 


HTML5+CSS3 王者 归来 
<1i> 清单 2</1i> 


<1i> 清单 n</1i> 
</ol1> 


程序 实例 ch5_3.html : 使 用 有 编号 的 项 目 列 
表 ， 列 出 美国 大 学 排行 榜 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <titleychs 3.html</title> 
6 </head> 

7 <body> 

3 <h1> 美 国 大 学 排行 榜 </h1> 


9 <oly 
19 <li>University of Harvard</li> 
了 <li>wIrre/li> 
12 <li>University of Yale</li> 
13 <li>University of Princeton</1i> 
14 </ol> 
15 </body> 
16 </html> 


美国 大 学 排行 榜 
te 


3. University of Yale 
4. University of Princeton 


< EE > 


| 5-3 | 设 定 有 编号 项 目 列表 的 起 始 编号 


5-2 节 所 述 项 目 列表 的 起 始 编 号 是 1， 
HTML5 在 <ol> 元素 中 定义 了 start 属性 ， 可 用 
设 定 start 值 的 方式 定义 起 始 编号 ， 此 值 必须 是 
整数 ， 可 以 是 正 值 、0 或 负 值 。 此 时 <ol> 元 素 
的 使 用 格式 如 下 : 

<ol start="n"> 

<1i> 清单 1</1i> 
<1i> 清单 2</1i> 


<1i> 清单 n</1i> 
</ol> 


上 述 <ol> 标 内 的 n 是 起 始 编号 值 。 

程序 实例 ch5_4.html : 用 属性 start 定义 列表 的 
起 始 编号 ， 列 出 机 器 人 赛跑 第 4 名 到 第 6 名 的 排 
行 榜 。 

1 xldoctype html> 

2 <html> 

3 <*head> 

4 <meta charset="utf-8"> 

对 <title>chs 4.htm]</titley 

6 </head> 

7 sbody> 

8 <h1> 机 器 人 赛跑 排行 榜 </hi> 

9 <ol start="4"> 

18 < 二 > 明志 科大 </1i> 

11 《<li> 台湾 科大 </1i> 

12 ”<li> 台北 科 大 </1i> 

13 </ol> 


14 </body> 


15 </html> 
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机 器 人 赛跑 排行 榜 


start 属性 值 也 可 以 是 负 值 ， 此 时 编号 将 采取 
每 次 递增 1 的 方式 处 理 。 
程序 实例 ch5_5.html : 列 出 清单 的 起 始 编 号 是 
负 值 的 应 用 ， 并 观察 执行 结果 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

a <meta charset="utf-8"> 

5 <title>chs 5.html</title> 


8 <h1l> 数 据 表 </h1> 

9 <ol start="-2"> 

19 ”<11> 高 速 公路 流量 </1i> 
11 <1i> 微 售 流量 </1i> 

12 <1i> 阿 里 巴巴 流量 </1i> 
13 ”<1i> 亚 马 进 流量 </1i> 
14 </ol> 

15 </body> 

16 </html> 


工 亚 马 轩 量 v 


从 上 述 执行 结果 可 以 看 到 列表 编号 由 负数 转 
到 正 数 的 过 程 。 
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Ese 是 更 改 项 目 列表 的 连续 编号 


在 输出 有 编号 的 项 目 列表 时 ， 也 可 以 使 用 
<li> 配合 value 属性 更 改 项 目 列表 的 编号 ， 编 号 
必须 是 整数 ， 可 以 是 正 数 、0 或 负数 。 此 时 <li> 
元 素 的 使 用 格式 如 下 : 

<ol> 

<1i> 清单 1</1i> 


<1i value="n"> 清单 2</1i> 


<1i> 清单 n</1i> 
</ol1> 
上 述 <li> 标记 内 的 是 新 的 编号 值 ， 后 续 
的 数据 将 自动 连续 编号 。 
程序 实例 ch5_6.html : 列 出 人 口 排名 ， 但 是 故 
意 跳 开 第 3 名 ， 直 接 列 出 第 4 名 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

欢 <title>ch5 6.html</title> 
6 </head> 

7 <body> 

8 <h1> 全 球 人 口 排名 </h1> 

9 <ol> 

19 <li> 中 国 </li> 

3 《1i> 印 度 C/1i> 

12 《<1i value="a"> 印 度 尼 西 亚 </1i> 
13 <li>EExc/li> 

14 </ol> 

15 </body> 

16 </html> 


全 球 人 口 排名 


1 中 国 
2 印度 
4 纯度 尼 西 亚 
5 巴西 


< HE > 


上 述 程序 第 12 行将 促使 排名 直接 跳 至 第 4 名 。 


Ee: 类 更 改 项 目 列表 的 编号 种 类 


HTMLS5 默认 的 项 目 列表 编号 是 阿拉 伯 数 
字 ，<ol> 元 素 可 以 使 用 type 属性 更 改 这 个 设 
定 ， 相 关 元 素 的 使 用 格式 如 下 : 
<ol 七 YPpe="m"><1i> … 
由 于 编号 列表 有 许多 条 ， 通 常 又 将 上 述 格式 
以 下 列 方式 表达 。 
<ol type="n"> 
<1i> 清单 1</1i> 
<1i> 清单 2</1i> 


</1i></ol1> 


<1i> 清单 n</1i> 
</ol1> 
an 的 可 能 值 与 影响 如 下 : 
1 : 这 是 默认 值 ， 编 号 是 1, 2, 3. … 


a : 小 写 英文 字母 ， 编 号 是 a, b, c, … 

A : 大 写 英 文字 母 ， 编 号 是 A, B, C, … 

i: 小 写 罗马 数字 ， 编 号 是 i, ii, iii,… 

I: 大 写 罗马 数字 ， 编 号 是 L,I, … 
程序 实例 ch5_7.html : 这 里 列 出 了 各 种 项 目 列 
表 种 类 的 范例 。 


1 xldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch5 7.html</title> 

6 </head> 

7 <body> 

8 <h1> 台 湾 旅游 人 点 排名 </h1> 

9 <ol type="a"> 

19 <1i> 台 北 故宫 </1i><1iy 日 月 潭 4/1i><1i> 阿 里 山 C/1i>> 
11 </ol> 

12 <h2> 台 湾 夜市 挂名 </h2> 

13 <ol type="A"> 

14 <li> 士 林 夜市 </1i><]i> 永 康 夜市 </1i><1i> 连 甲 夜 市 </1i> 
15 </ol> 

16 “<h2> 台 湾 人 口 排 名 </h2> 

17 “ol type="i"> 
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18 《<11> 新 北市 (/11><1i> 台 北市 </11><1i> 桃 园 市 </1i> 这 个 程序 分 别 在 第 9 行 、 第 13 行 、 第 17 
19 «</ol> 
0 行 和 第 21 行 设 定 了 项 目 列表 的 编号 类 别 ， 由 
加 pots te el A 执行 结果 相信 读者 可 以 很 容易 了 解 本 程序 的 设 
24 </body> i 
25 tnl> 计 原 则 。 
时 台湾 jk 激 录 点 排名 i 
4 
2 
Fem 
台湾 夜市 排名 
A Me 
也 未 事态 市 
开机 
台湾 人 口 排名 
新 
姓名 匹 南 
这 其 
台湾 最 健康 大 学 排名 
上 明太 
IL 安 演 体 渡 
亚 . 台北 体 院 加 


| 5-6 项 目 列表 编号 递减 的 应 用 


前 面 几 节 所 介绍 的 项 目 列表 编号 皆 是 递增 ， ee 
如 果 在 <ol> 元 素 内 设 定 reserved 属性 ， 则 可 以 让 2 


<title>chs a.html</title> 


项 目 列表 编号 递减 。 相 关 元 素 的 使 用 格式 如 下 : 6 cjheady 


7 cbodyy 
: hh 证 口 最少 h: 
<ol reserved="reserved"><1i> … ld 吓人 生生 
， 19 。 《liy> 台 东 </1i><1li> 金 门 /1i><1i> 马 福 </1i> 
</1i></ol> 14 x/ol> 


12 “<h2> 世 界 秆 酒 排名 cyh2> 


了 二 
由 于 项 目 列表 有 许多 条 ， 通 常 又 将 上 述 格式 。 总 .oo 帮 和 二 本 二 在 汪 面 5 天 天 二 看 5 
15 《/ol> 


以 下 列 方式 表达 。 16 hz 亚洲 物理 更 赛 捧 名 <Jh2> 


17 <ol reversed> 


<ol reserved="reserved"> 了 pe 


。 29 </body> 
<1i> 清单 1</1i> ee 


<1i> 清单 2</1i> 
> ;下 和 和 超车 台湾 城市 人 口 最 少 排名 


<1i> 清单 n</1i> 光 
</ol1> 世界 啤酒 排名 
另外 ， 也 可 以 使 用 reserved 或 reserved="" 
亚洲 物理 竞赛 排名 
方式 指定 项 目 列表 编号 为 递减 。 ;站 
程序 实例 ch5_8.html : 项 目 列表 编号 递减 的 应 = 
用 。 笔 者 测试 了 3 种 方法 。 上 述 程序 的 第 9 行 、 第 13 行 和 第 17 行 ， 笔 


@ 正 11 尚未 支持 此 功能 ， 下 列 执行 结果 是 使 《者 分 别 使 用 不 同 的 reversed 属性 设 定 方式 ， 测 试 
用 Google Chrome 得 到 的 。 项 目 列表 编号 递减 的 功能 。 
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| 5-7 | 自 定义 清单 


所 谓 的 自 定义 清单 是 自行 定义 一 个 名 词 ， 然 

后 对 此 名 词 做 解释 。 在 <dl> 元 素 内 ， 有 一 个 名 词 

用 语 ( 以 <df 定义 )， 以 及 针对 该 名 词 用 语 的 说 明 
(以 <dd> 定义 )。 自 定义 清单 的 基本 格式 如 下 : 


<dl><dt> … </dt><dd> … </dd> 
<dl> 

由 于 自 定义 清单 有 许多 条 ， 通 常 又 将 上 述 格 
式 以 下 列 方式 表达 。 

<dl> 


<dt> 名词 1</dt> 

<dq> 名 词 1 的 说 明 </dd> 
<dt> 名 词 2</dt> 

<dd> 名 词 2 的 说 明 </dd> 


<dt> 名词 n</dt> 
<dq> 名 词 n 的 说 明 </dd> 
</dl> 


程序 实例 ch5_9.html: 自 定义 清单 的 基本 使 用 说 明 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <titleychs 9,.html</title> 
6 </head> 

7 <body> 

8 ch) 国 家 首 地 娄 扫 表 Jhi> 

9 <dl> 

10 <dt>Washington</dt> 

11 <dd> 美 国 首都 </dd> 

12 <dt>Tokyo</dt> 

13 <dd> 日 本 首都 </dd> 

14 <dt>paris</dt> 

15 <dd> 法 国 首都 </dd> 


17 </body> 
18 </html> 


习题 
1. 列 出 世界 5 个 城市 ， 


以 点 符 列 表 加 超 链 接 方式 表达 ， 单 击 后 在 网 页 适当 位 置 介绍 这 个 城市 。 请 读 
一 个 HIML 文件 设计 此 网 页 ， 同 时 请 自行 美化 网 页 。 
2. 重新 设计 上 述 程序 ， 每 一 个 超 链接 皆 使 用 新 的 HTML 文件 表达 。 
3. 以 点 符 列表 制作 5 种 考试 科目 列表 ， 当 单 击 列 表 时 ， 可 以 跳 至 显示 各 科 考 试 分 数 ， 
请 使 每 一 个 超 链接 皆 用 新 的 HTML 文件 表达 ， 同 时 请 自行 美化 网 页 。 


执行 结果 
国家 首都 数据 表 
TS 


yo 由 
mE v 


此 外 ， 在 自 定义 清单 的 名 词 说 明 中 ， 
<dd> 元 素 内 容 也 可 以 是 一 个 段落 文件 、 图 片 
或 超 链 接 。 
程序 实例 ch5_10.html : 自 定义 清单 中 ， 以 整 
个 段落 表达 <dd> 元 素 的 内 容 。 


1 «ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset-"utf-g"y 

5 <xtitleychs_19.htmle/titley 


chl>Silicon stone Educationc/hay 
9 <dl> 
10 <dt>Big Data Knowledge Today</dt> 


11 《dd> 大 数据 (Big Data) 已 成 为 目前 全 球 学 术 单 位 、 政 府 机 关 以 及 
12 项 闯 企 业 必 须 认真 面 对 的 挑战 ， 随 着 有 关 大 数据 的 程序 语言 、 

13 运算 平台 、 基 础 各 论 ， 以 及 座 朴 化 、 容 扣 化 技术 的 成 训 ， 了 解 
14 大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 1 

15 进修 、 求 职 ， 深 寺 的 必 备 技能。</dd> 


16 。 xdtyR Language Todayc/dty 
17 《dd> 户 由 软件 R 是 一 种 根基 于 S 谨 育 的 GU 免费 的 统计 数学 套 先 分 
18 享 软件 ,为 探索 性 数据 分 析 、 闭 计 方法 及 图 形 提供 了 所 有 源码 。 
19 </dd> 


21 </body> 
22 </html> 


Silicon Stone Education 


Big Data Knowledge Today 
大 数据 (B 刘 人 A 
须 认真 面 的 随 着 有 关 大 数据 的 ; 、 基 础 理 

论 ， 以 及 庶 拟 化 ` 容器 化 技术 的 成 熟 ， 的 人 实 作 ` 工 上 
具 、 应 用 以 及 未 来 趋势 ， 将 会 是 求 学、 进修、 求职 ' 深井 的 必 备 技 | 


人 Rangiage Toda 
Ea fees 语言 的 GNU 免 费 的 统计 数学 套装 分 享 软 | 
探索 住 次 撕 分 析 、 统计 方法 及 图形 提供 了 所 有 源码 。 


以 座 号 排名 。 


本 章 摘要 


6=1 
6=2 
6=3 
6-4 
6-5 
6-6 
6=7 
6-8 
6=9 


表格 的 基本 元 素 

表格 框 线 的 border 属性 

建立 表 头 <thead> 和 <th> 元 素 

建立 表格 本 体 <tbody> 元 素 

建立 表 尾 <tfoot> 元 素 

合并 横向 单元 格 colspan 属性 

合并 纵向 单元 格 rowspan 属性 

表格 的 标题 <caption> 元 素 
单元 格 的 群 组 化 <colgroup> 和 <col> 元 素 


6-10 ”表格 与 超 链接 的 混合 应 用 


表格 是 网 页 设计 时 频繁 使 用 的 单元 。 其 实 表格 功能 在 设计 上 除了 建立 表格 外 ， 在 HTML4.01 时 
代 ， 只 要 表格 不 加 上 框 线 ， 也 有 程序 设计 师 会 将 此 功能 应 用 在 网 页 排版 上 。 不 过 ， 在 HTML5 时 代 ， 
建议 网 页 编辑 排版 时 使 用 CSS3。 本 章 重 点 是 讲解 表格 设计 。 在 表格 设计 中 ， 许 多 HTML5 已 经 宣告 


不 支持 的 属性 ， 例 如 align、 


bgcolor、 cellpadding、cellspacing、frame、summary、rules 和 


width 等 属性 ， 本 章 将 不 做 介绍 。 这 主要 是 期 待 读者 从 基础 开始 就 有 设计 网 页 的 好 习惯 ， 将 网 页 文件 
的 内 容 与 结构 和 外 观 设计 分 开 ， 同 时 避免 读者 使 用 ， 以 免 当 浏览 器 不 支持 时 ， 所 设计 的 网 页 产生 错误 。 
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| 6-1 表格 的 基本 元 素 


设计 表格 需要 下 列 3 个 基本 元 素 : 

<table> : <table> 是 表格 的 开始 标记 ，</ 
table> 是 表格 的 结束 标记 ， 所 有 的 表格 规划 就 是 
在 这 个 元 素 中 。 

<tr> : 定义 行 (row)，<tr> 定义 行 的 起 始 ， 
</tr> 定义 行 的 结束 。 

<td> : 定义 单元 格 。 

若是 将 上 述 3 个 元 素 综合 使 用 ， 那 么 表格 的 
格式 如 下 : 


<table> 
<tr><td> 内 容 </td> … <td> 内 容 </td></tr> 


<tr><td> 内 容 </td> … <td> 内 容 </td></tr> 
</table> 


在 这 些 表格 的 单元 格 内 输入 内 容 时 默认 的 格 
式 是 靠 左 对 齐 。 


程序 实例 ch6_1.html : 基本 表格 的 应 用 ， 这 个 程 
序 将 建立 一 个 有 2 行 , 每 行 有 3 个 单元 格 的 表格 。 


1 xldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

对 <title>ch6_1.html</title> 

6 </head> 

7 <body> 

8 <table> 

9 <tr><td> 长 江 </td><td> 中 国 </td><td> 亚 洲 (/td></tr> 
19 ”<tr><td> 尼 罗 河 </td><td> 埃 及 </td><td> 非 洲 </td></tr> 
11 <tr><td> 亚 马 孙 河 </td><td> 巴 西 </td><td> 南 美洲 </td></tr> 
12 </table> 

13 </body> 

14 </html> 


中 国 亚洲 
尼罗河 ”埃及 非洲 
亚 马 孙 河 已 西南 美洲 


我 们 已 成 功 建立 一 个 表格 了 ， 可 是 这 个 表格 
没有 框 线 ， 下 一 节 将 介绍 加 框 线 的 方法 。 


es 表格 框 线 的 border 属性 


在 HTML4.01 时 代 ， 当 不 指定 border 的 值 
时 所 呈现 的 表格 是 没有 框 线 的 ，HTML 程序 设 
计 师 就 利用 这 个 特性 进行 网 页 排版 。6-1 节 程 序 
实例 的 表格 不 含 框 线 ， 其 实 只 要 将 border 属性 
设 为 1， 同 时 放 在 <table> 元 素 内 就 可 以 为 表格 
建立 框 线 ， 使 用 方法 如 下 : 


<table border="1"> 
办 窑 


<tr><td> 内 容 </td> … <td> 内 容 </ 
td></tr> 

<tr><td> 内 容 </td> … <td> 内 容 </ 
td></tr> 

</table> 


另外 ，border 也 可 以 取 任 一 数值 ， 这 个 数值 


所 指 的 是 外 框 线 的 宽度 。 不 过 ，HTML5 语意 上 
不 用 此 方法 设计 外 框 线 宽度 ， 而 是 使 用 CSS3。 
程序 实例 ch6_2.html : 增加 表格 的 框 线 ， 重 新 
设计 ch6_1.html。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch6 2.html</title> 
6 </head> 

7 <body> 

8 <table border="1"> 

9 <tr><td> 长 江 </td><td> 中 国 </td><td> 亚 洲 </td></tr> 

19 ”<tr><td> 尼 罗 河 </td><td> 埃 及 </td><td> 非 洲 </td></tr> 
11 ”<tr><td> 亚 马 孙 河 </td><td> 巴 西 </td><td> 南 美洲 </td></tr> 
12 </table> 
13 </body> 
14 </html> 


HTML5+CSS3 王者 归来 


REE 
= 


| 


| 6-3 | 建立 表 头 <thead> 和 <th> 元 素 


HTML 使 用 <thead> 元 素 建立 表 头 〈 也 可 称 
为 表格 的 标题 行 )， 在 表 头 内 则 使 用 <th> 定义 表 
头 的 单元 格 ， 这 两 个 元 素 配 合 <table> 使 用 格式 


如 下 了 
<table border="1"> 
<thead> 
<tr><th> 内 容 </th> … <th> 内 
容 </th></tr> 
</thead> 
<tr><td> 内 容 </td> … <td> 内 容 
</td></tr> 
<tr><td> 内 容 </td> … <td> 内 容 </ 
ta></tr> 
</table> 


在 默认 环境 下 ， 表 头 内 的 数据 将 以 粗 体 显 
示 ， 同 时 在 单元 格 内 居中 对 齐 。 


程序 实例 ch6_3.html : 为 表格 建立 表 头 ， 重 新 
设计 ch6_2.html。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset-"utf-8"> 

5 <title>ch6 3.html</title> 

6 </head> 

7 <body> 

8 <table border="1"> 

9 ”<thead><1-- 建 立 表 头 --> 

19 <tr><th> 河 流 名 称 </th><th> 国 家 </th><th> 洲 名 </th></tr> 
11 /thead> 

12 <tr><td> 长 江 </td><td> 中 国 c/td><ctd> 亚 洲 </td></tr> 

13 <tr>ctd> 尼 罗 河 </td>ctd> 埃 及 </td>ctd> 非 洲 c/td>c</tr> 

14 ”<tr><td> 亚 马 孙 河 </td><td> 巴 廿 </td><td> 南 美洲 </td></tr> 
15 </table> 


16 </body> 
17 </html> 
行 结 河流 名 称 [ 国 列 | 洲 名 ] 
执行 结果 区 了 [FE 
世 罗 坷 匡 到 亚洲 
ra |i 


| 6-4 | 建立 表格 本 体 <tbody> 元 素 


上 一 节 的 程序 虽然 已 很 清楚 地 表达 了 表格 的 设计 逻辑 ， 但 是 当 我 们 在 表格 中 增加 了 <thead> 元 
素 定 义 表 头 时 ， 习 惯 也 会 使 用 <tbody> 定义 表格 的 本 体 ， 这 样 整个 程序 设计 起 来 会 更 明确 。 此 时 整 


个 表格 设计 的 格式 如 下 : 


<table border="1"> 
<thead> 
<tr><th> 内 容 </th> … 
</thead> 
<tbody> 
<tr><td> 内 容 </td> … 


<tr><td> 内 容 </td> … 
</tbody> 
</table> 


<th> 内 容 </th></tr> 


<td> 内 容 </td></tr> 


<td> 内 容 </td></tr> 


程序 实例 ch6_4.html : 使 用 <tbody> 定义 表格 
的 本 体 ， 使 程序 更 清楚 明确 。 


1 xldoctype html> 
2 <html> 

3 <head> 

a <meta charset="utf-8"> 

5 ctitle>ch6 4,html</title> 
6 </head> 

7 <body> 

8 <table border- 


9 <thead><1-- 建 立 表 头 --> 

19 <trycth> 河 流 名 称 </th><th> 国 家 </th><th> 洲 名 </th>c/try> 
11 <c/thead> 

12 ”<tbody><1-- 建立 表格 本 体 --> 

13 <tr><td> 长 江 </td><td> 中 国 </td><td> 亚 洲 </td></tr> 
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14 <tr>ctd> 尼 罗 河 </td><td> 埃 及 </td><ctd> 非 洲 </td></tr> 

a <tr>ctd> 亚 马 孙 河 </td><td> 巴 酉 </td><td> 南 美洲 </td></tr> 
16 </tbody> 

17 </table> 

18 </body> 

19 </html> 


ED 
长 江 中 
尼罗河 
到 也 宛 河 [区 二 请 甘油 


| 6-5 | 建立 表 尾 <tfoot> 元 素 


在 建立 表格 时 ， 有 时 候 需 要 使 用 表 尾 
<tfoot> 元 素 做 一 份 整体 表格 的 注 记 。 将 表 尾 应 
用 在 表格 设计 时 ， 使 用 的 格式 如 下 : 


<table border="1"> 
<thead> 
<tr><th> 内 容 </th> … 
容 </th></tr> 
</thead> 
<tbody> 
<tr><td> 内 容 </td> … 
容 </td></tr> 


<th> 内 


<td> 内 


<tr><td> 内 容 </td> … <td> 内 容 
</td></tr> 
</tbody> 
<tfoot> 
<tr><td> 内 容 </td></tr> 
</tfoot> 


</table> 


程序 实例 ch6_5.html : 以 增加 表 尾 方式 建立 表格 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch6_5.html</title> 

5 </head> 

7 <body> 

8 <table border="1"> 

9 ”<thead><1-- 建 立 表 头 --> 

19 <tr><th> 河 流 名 称 </th><th> 国 家 </th><th> 洲 名 </th></tr> 
11 </thead> 

12 <tbody>*1-- 建立 表格 本 体 --> 


13 <tr><td) 长 江 </td><td> 中 国 </td><td> 亚 洲 (/td></tr> 

14 <tr>*td> 尼 罗 河 </td><ctd> 埃 及 </td><td> 非 洲 </td></tr> 

15 《<tr>¢td》 亚 马 孙 河 </td><td> 巳 两 </td><td> 商 美洲 </td></tr> 
16 </tbody> 

17 <tfoot><!-- 建立 表 尾 --> 

18 <try<td> 制 表 2917 年 5 月 39 昌 </td></tr> 

19 </tfoot> 

29 </table> 

21 </body> 

22 </html> 


长 江 中 国 | 亚洲 


尼罗河 陕 及 | 非洲 
呈 马 于 河 EE 所 二 济 
制 表 2017 年 5 月 30 昌 


| 6-6 | 合并 横向 单元 格 colspan 属性 


在 上 一 节 的 实例 中 ， 我 们 在 表 尾 中 只 设计 
了 一 个 单元 格 ， 其 实 这 不 是 好 的 设计 ， 整 体 不 
一 致 ， 同 时 感觉 怪 怪 的 。 通 常 我 们 在 设计 这 类 
表格 时 ， 可 以 使 用 colspan 属性 ， 直 接 将 整 行 单 
元 格 合并 ， 再 将 单元 格 原先 内 容 写 入 此 合并 的 


单元 格 内 。 如 果 将 colspan 属性 放 在 定义 表格 本 
体 的 单元 格 <td> 元 素 时 ， 此 时 使 用 如 下 格式 : 


<tr><td colspan="n"> … </td></tr> 


上 述 n 代表 合并 单元 格 的 个 数 。 
程序 实例 ch6_6.html : 以 合并 单元 格 方式 


HTML5+CSS3 王者 归来 


设计 ch6_5 html。 


CT 


29 
21 
22 


行 结 项 名 彻 国 宙 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-g"> 
<title>ch6 6.html</title> 
</head> 
<body> 
<table border="1"> 


<thead><!-- 建 立 表 头 --> 
<tr><th》 河 流 名 称 </th><th> 国 家 </th><th> 洲 名 </th></tr> 
</thead> 
<tbody><!-- ”建立 表格 本 体 --> 
<tr><td) 长 江 </td><td> 中 国 </td><td> 亚 洲 </td></tr> 
<tr><td> 尼 罗 河 6/td><td> 埃 及 </td><td> 非 洲 </td></tr> 
<tr><td> 亚 马 进 河 </td><td> 巴 西 </td><td> 南 美洲 </td></tr> 
</tbody> 
<tfoot><!-- 建立 表 尾 --> 
<tr><td colspan="3"> 制 表 2917 年 5 月 38 晶 </td></tr> 
</tfoot> 
</table> 
</body> 
</html> 


此 罗 厅 | 卫 有 
到 法 河 | 
表 2017 年 5 眉 30 昌 


上 述 第 18 行 设 定 将 3 个 单元 格 合并 ， 然 后 在 


合并 后 的 单元 格 输入 “ 制 表 2017 年 5 月 30 日 ” 


合并 单元 格 的 功能 也 可 以 应 用 在 表格 的 表 


头 ， 如 果 将 colspan 属性 放 在 定义 表格 表 头 的 单 
元 格 <th> 元 素 时 ， 此 时 使 用 如 下 格式 : 


<tr><th colspan="n"> … </th></tr> 


另外 ， 在 表 头 的 单元 格 内 放置 colspan 属性 


时 ， 所 输入 的 内 容 将 自动 居中 对 齐 。 

程序 实例 ch6_7.html : 扩充 ch6_6.html， 以 合 
并 单元 格 的 观念 应 用 在 表格 表 头 ， 同 时 在 此 输入 
“联合 国 水 资源 中 心 ”。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-e"> 

5 <titleyxch6 7.html</title> 
6 </head> 

7 <body> 

8 <table border="1"> 

9 。 “<thead><1-- 建 立 去 头 --> 


19 <tr><th colspan="3"> 联 合 国 水 资源 中 心 </th></tr> 

11 <tr><th> 河 流 名 称 </th>《thy 国 家 </thykth> 洲 名 </th></try 
12 </thead> 

13 ”<tbody><1-- 建立 表 税 本 体 --> 

14 <tr><td> 长 江 </td><td> 中 国 ¢/td><td> 亚 洲 </td></tr> 

15 <tr><td> 尼 罗 河 </td>ctd> 埃 及 </td><td> 非 洲 </td></tr> 

16 <tr><td> 亚 马 带 河 </td><td> 巴 凋 </td><td> 南 美洲 </td></tr> 


17 </tbody> 
18 <tfoot><!-- 建立 表 尾 --> 

19 <tr><td colspan="3"3 制 表 2817 年 5 月 38 晶 </td></tr> 
29 </tfoot> 

21 </table> 

22 </body> 

23 </html> 


执行 结果 


| 制 表 2017 年 5 后 30 日 


上 述 第 10 行 是 设 定 将 3 个 单元 格 合 并 ， 然 后 
在 合并 后 的 单元 格 中 输入 “联合 国 水 资源 中 心 ”。 


| 6-7 | 合并 纵向 单元 格 rowspan 属性 


合并 纵向 单元 格 的 属性 是 rowspan， 这 个 


属性 同样 可 以 应 用 在 定义 表格 表 头 的 单元 格 元 
素 <th>， 也 可 以 应 用 在 定义 表格 本 体 的 单元 格 
<td>， 此 时 的 使 用 格式 如 下 : 


<tr><th rowspan="n"> … </th></tr> 
或 
<tr><td rowspan="n"> … </td></tr> 


上 述 n 是 欲 合并 的 单元 格 个 数 。 在 纵向 合并 的 


单元 格 中 输入 数据 时 ， 数 据 将 主动 垂直 居中 对 齐 。 
程序 实例 ch6_8.html : 合并 纵向 单元 格 。 


1 <ldoctype htmly 
2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 xtitleych6_8.htmlx/titley 

6 </head> 

7 <body> 

8 <table border="1"> 

9 <thead><1-- 建 立 表 头 --> 

18 <tr><th colspan="3"> 深 石 数位 要 场 </th></tr> 

1 <tr><th> 店 名 </th>cth> 地 址 </th>cth> 营 业 时 间 </th></tr> 
12 </thead> 

13 <tbody><1-- 建立 表格 本 体 --> 


14 <tr>ctd> 天 母 店 c/td>ctd> 台 北市 呢 诚 路 209 亏 <c/td> 

15 <td rowspan="2">99:08-23:08</td></tr> 

16 <tr><td> 大 安 店 /td><td> 台 北市 大 安 路 16 号 </td></tr> 

17 《tryetd> 新 往 店 </td><td> 新 竹 市 清华 路 112 号 </td><td>11:88-28:98</td>¢/tr> 


18 </tbody> 
19 <tfoot><1-- 建立 表 旦 --> 

28 <tr>ctd colspan="3"? 齐 卖 2617 年 5 月 36 忆 </td>c/tr> 
2 sjtfoot> 

22 </table> 

23 dbody> 

24 </htmly 


第 6 章 设计 表格 


上 述 程序 的 亮点 是 第 15 行 ， 在 这 里 执 
行 了 合并 纵向 2 个 单元 格 ， 同 时 在 此 输入 
“09:00-23:00”， 最 后 所 列 出 的 执行 结果 将 垂 
直 居 中 对 齐 。 


| 6-8 表格 的 标题 <caption> 元 素 


虽然 先前 笔者 已 经 用 实例 介绍 过 利用 表格 的 
表 头 来 建立 表格 的 标题 ， 但 是 有 些 人 在 建立 表格 
时 ， 还 是 想 将 表格 标题 独立 于 表格 之 外 ， 此 时 可 
以 使 用 <caption> 元 素 ， 这 也 是 本 节 的 重点 。 这 
个 元 素 的 使 用 格式 如 下 : 


<table> 
<caption> 标题 </caption> 


</table> 


其 实 <caption> 元 素 只 要 放 在 <table> 和 
</table> 标记 之 内 即 可 在 表格 上 方 显 示 表 格 标 
题 。 上 述 使 用 格式 笔者 是 将 <caption> 放 在 紧 
接着 的 <table> 元 素 之 后 ， 这 与 将 <caption> 放 
在 </table> 上 方 的 效果 是 相同 的 。 另 外 ， 使 用 
<caption> 元 素 时 ， 表 格 标题 将 居中 对 齐 。 
程序 实例 ch6_9.html : 使 用 <caption> 元 素 为 


表格 建立 标题 。 

1 <ldoctype htmly 

2 <htnl> 

3 <head> 

4 Ameta charset="utf-a"> 

5 <titleyche 9.htmlc/titley 

6 </head> 

7 <body> 

3 <table border="1"> 

9 <caption> 深 石 数字 实 场 </caption> 

210 <thead><1-- 建 立 表 头 --> 

1 <try<thy 隔 名 </thycthy 地 址 </th>ethy 营 业 时 间 e/thy</try 
12 </theady 

13 ”<tbody><1-- 建立 表格 本 体 --> 

14 <tryctd> 天 母 下 cftd><tdy 台 北市 号 诚 路 298 号 </td> 

15 <td rowspan="2">09;00-23:00</td></tr> 

16 <tr><td> 大 安 店 6/td>ctd> 台 北市 大 安 路 19 号 </td></tr> 
17 <tryctd? 新 竹 店 </td>ctd> 新 竹 市 清华 路 112 号 c/td>ctd>11;98-29:98c/td>c/tr> 
18 </tbody> 

19 </table> 

28 </body> 

21 </html> 


行 深 五 数位 卖场 
执行 结果 ET 
天 母 店 [ 台 北市 志 诚 路 200 号 | 
大安 周 [ 台 北市 大 安 路 10 号 
新 竹 店 | 新 往 市 清华 路 112 号 ||11:00-20:00| 


营业 时 间 


|09:00-23:00| 


这 个 程序 的 重点 是 第 9 行 的 <caption> 元 
素 ， 在 此 我 们 建立 了 表格 的 表 题 。 


| 6-9 | 单元 格 的 群 组 化 <colgroup> 和 <col> 元 素 


在 表格 使 用 中 ， 如 果 想 将 整个 列 的 单元 格 
群 组 化 ， 可 以 使 用 <colgroup> 和 <col> 元 素 。 在 
使 用 上 <col> 是 <colgroup> 的 子 元 素 ， 用 于 定 
义 <colgroup> 每 一 个 列 的 列 属性 。<col> 这 个 元 
素 没 有 结束 标记 。 <colgroup> 元 素 在 使 用 时 必须 
放 在 <table> 元素 内 ， 在 <caption> 之 后 但 是 需 
在 <thead>、 <tbody>、<tfoot> 和 <tr> 元 素 之 前 。 


<colgroup> 配合 <col> 元 素 的 使 用 格式 如 下 : 
<colgroup> 
<col span="n"> 
</colgroup> 


上 述 span 属性 设 定 的 n 值 ， 主 要 是 定义 列 
的 列 数 。 如 果 省 略 span 属性 ， 则 列 数 是 1。 


HTML5+CSS3 王者 归来 


程序 实例 ch6_10.html : 群 组 列 的 应 用 。 这 个 
程序 将 群 组 化 的 列 数 设 为 3， 不 更 改 表格 的 定 
义 ， 设 定 第 一 个 群 组 列 的 背景 色 是 灰色 、 第 二 个 
群 组 列 的 背景 色 是 黄色 、 第 三 个 群 组 列 的 背景 色 
是 橘 色 。 这 个 程序 笔者 使 用 了 尚未 讲解 的 样式 表 
元 素 “style”， 在 本 书 第 11 章 起 会 大 量 介绍 此 元 
素 ， 暂 时 建议 读者 只 要 了 解 即 可 : 
style="background-color:lightgray" 


style="background-color:yellow" 


style="background-color:orange" 


可 分 别 产生 背景 色 为 灰色 、 黄 色 和 橘 色 。 


1 <ldoctype html> 
2 <html> 

3 head> 

a meta charset="utf-a"> 

5 <titlexche 10.html</title> 

6 </head> 

7 <body> 

<table border="1"> 

9 ”<caption> 深 数字 实 场 </caption> 

10 <colgroup> 

11 <col style="background-color: lighteray"> 

12 <col style="background-color:yellow"> 

了 <col style-"background-coloriorange"y 

14 </colgroup> 

15 《thead)<!-- 寻 立 表 头 --> 

16 <tr><th> 店 名 </th><th> 地 址 </th><th> 营 业 时 间 </th></tr> 
17 /thead> 

18 <tbody><1-- 建立 表格 本 体 -- 


19 et 天 母后 CJtd><tdy 各 北 市 号 良 辽 209 生 cjtd> 

29 <td rowspan="2"»99:98-23:68</td></tr> 

21 try<td> 大 安 店 (/td><td> 台 北市 大 安 路 1 号 </td></tr> 

22 <tr><td> 新 竹 店 6/td><td> 新 竹 市 清华 路 112 寺 </td><td>11:89-28:90</td></tr> 
23 </tbody> 

24 </table> 

25 </body> 

26 </html> 


上 述 程序 第 11 行 定义 了 第 一 个 群 组 列 ， 
由 于 省 略 span 属性 设 定 ， 所 以 只 有 一 列 ， 显 


示 背 景色 是 灰色 。 第 12 行 定 义 了 第 二 个 群 组 
也 只 有 一 列 ， 显 示 背 景色 是 黄色 。 第 13 
行 定义 了 第 三 个 群 组 列 ， 也 是 一 列 ， 显 示 背 景 
色 是 橘 色 。 
程序 实例 ch6_11.html : 这 个 程序 重新 设计 
ch6_10html， 第 一 个 群 组 列 依旧 是 指 第 一 列 ， 不 过 
将 第 二 和 第 三 个 列 群 组 化 成 第 二 个 群 组 列 ， 同 时 令 
第 一 个 群 组 列 的 表格 背景 色 是 灰色 ， 第 二 个 群 组 列 
的 背景 色 是 黄色 。 


1 cldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"» 

5 <titleyche 11.html</title> 


3 <table border="1"> 
9 <caption> 深 石 数字 实 场 (/caption> 

10 <colgroup> 

1 <col style="background-color: lightgray"> 

12 «col span="2" style="background-color:yellow”"> 

1 </colgroup> 

14 <thead><1-- 建立 表 头 - 

15 rct 隐 再 各 c/th 人 由 地 引 c/thykthy 可 业 时 则 c/thy/try 

16 </thead> 

17 。 <tbodyy<1-- 建立 表格 本 体 - 

18 <tr><td> 天 母 店 </td><td> ;后 北市 该 中 209 守 。 s/td> 

19 <td rowspan="2"y99:69-23:60</td>c/try 

29 <tr?ktd> 大 安 店 cftd>std? 台 北市 大 安 路 16 扎 </td</tr> 

1 <tn>etd> 新 竹 庚 </td>etd> 新 竹 市 清华 路 112 号 </td><td>11:98-29:98</td></tr> 


深 石 数字 类 场 


上 述 程序 第 11 行 定义 了 第 一 个 群 组 列 ， 
但 只 有 一 列 ， 背 景色 是 灰色 。 最 重要 的 是 第 12 
行 ，span="2" 目的 是 定义 这 个 群 组 列 包 含 2 
列 ， 背 景色 是 黄色 。 


[ET 者 与 超 链 接 的 混合 应 用 


在 第 4 章 笔 者 介绍 了 超 链接 的 知识 ， 这 节 主 要 是 用 一 个 实例 将 超 链接 应 用 在 表格 内 。 


程序 实例 ch6_12.html : 
Intel 公司 的 网 页 。 


这 个 程序 在 执行 时 ， 可 以 通过 单 击 表格 内 的 超 链接 连 上 IBM、Apple 或 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch6 12.html</title> 
6 </head> 

7 <body> 

8 <table border="1"> 

9 <thead><1-- 建立 表 头 --> 


19 <tr><th colspan="3"> 美 国电 子 大 厂 </th></tr> 
11 <tr><th> 公 司 </th><th> 产 品 </th></tr> 
12 </thead> 


13 ”<tbody><1-- 建立 表格 本 体 --> 
14 <tr><td><a href="http://www, ibm, com">IBM</a> 


15 《</td><td> 大 型 主机 </td></tr> 

16 <tr><td>¢a href="http://www.apple.com">Apple</a> 
17 《</td><td> 随 身 装置 </td></tr> 

18 <tr><td><a href="http://www.intel .com">Intel</a> 
19 </td><td> 电 子 芯片 </td></tr> 

29 </tbody> 

21 </table> 

22 </body> 

23 </html> 

习题 


第 6 章 设计 表格 


下 方 左 图 是 执行 结果 ， 如 果 将 鼠 
标 指针 指向 超 链接 ， 将 看 到 下 方 右 图 所 示 面 面 ， 


单 击 后 将 连 上 指定 网 页 。 
[ 甘 国 和 天 广 ] EE 
公司 | 产品 产品 
本 三 向 E31 
[te [EFF [ntel | 所 子 志 撒 


R116% v3 (eon ies 有 本 


1. 请 建立 一 个 自己 的 课程 表 网 页 ， 并 在 课程 表 内 用 到 合并 列 单元 格 和 行 单元 格 功能 。 
2. 请 参考 报纸 或 旅游 网 站 的 旅游 专刊 ， 以 表格 形式 列 出 6 天 夏威夷 旅游 的 行程 表 。 


本 章 摘要 

7-1 嵌入 图 片 <img> 元 素 

7-2 标示 文件 标题 <figure> 和 <figcaption> 元 素 
7-3 制作 响应 图 

7-4 在 表格 内 诅 入 图 片 

7-5 设计 图 片 的 超 链 接 

7-6 将 图 片 作为 项 目 符号 

7-7 简易 编排 嵌入 图 片 与 文字 

7-8 GIF 动画 


精彩 的 图 形 是 网 页 不 可 或 缺 的 一 部 分 ， 本 章 我 们 将 就 在 网 页 伐 入 图 片 的 功能 与 方法 做 一 个 完 
整 的 解说 。 在 本 章 我 们 会 使 用 一 些 长 度 单位 ， 有 关 网 页 设计 所 使 用 的 长 度 单位 可 以 参考 附录 D。 


第 7 章 嵌入 图 片 


医 2 话 入 图 片 <img> 元 素 


这 个 元 素 没有 结束 标 ， 它 的 使 用 格式 如 下 : 
<img src=" 图 片 的 URL"” alt=" 替代 的 文字 " 
height=" 像素 " width=" 像素 "> 


日 国 :jxe: 


src 指 图 片 名 称 或 是 图 片 的 URL。HTML5 
可 以 接受 的 图 片 格式 有 GIF、PNG、JPG, 或 是 
SVG、PDF 文件 。 


口 alt 


当 图 片 因 某 些 原因 无 法 显示 时 ， 在 图 片 位 置 可 
以 列 出 此 属性 设 定 的 文字 。 则 如 果 省 略 这 个 属性 ， 
则 当 图 片 无 法 显示 时 ， 图 片 位 置 将 以 圆 取代 。 


OD height/width 


height 是 图 片 的 高 度 ， 单 位 是 px (pixel)， 

此 值 必须 大 于 0 ; width 是 图 片 的 宽度 ， 单 位 是 
px， 此 值 必须 大 于 0。 如果 所 设 定 的 值 与 真实 图 
片 大 小 不 符 ， 则 浏览 器 会 强制 缩放 图 片 。 如 果 省 
略 这 两 个 属性 ， 则 依 图 片 实际 大 小 显示 。 

程序 实例 ch7_1.html : 输出 图 片 的 应 用 。 这 个 
程序 会 将 图 片 输出 两 次 ， 第 一 次 指定 宽度 和 高 
度 ， 第 二 次 不 指定 。 在 执行 这 个 程序 前 ， 本 程序 
所 在 的 ch7 文件 夹 内 一 定 要 有 sselogo.jpg 文件 才 
可 以 正常 执行 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

多 <title>ch7_1.html</title> 

6 </head> 

7 <body> 

8 <h1l>silicon Stone Education</h1> 

9 <py> 图 片 高 是 199px&nbsp;&nbsp; 图片 宽 是 156px</p> 
16 <img src="sselogo. jpg” height="100" width="150"> 
11 “py 使 用 默认 图 片 大 小 </p> 

12 <img src="Sse jpg"> 

13 </body> 

14 </html> 


Silicon Stone Education 
omps 同室 ops 
次 


妆 册 职 认 国 H 大 小 


i re | 
程序 实例 ch7_2.html : 测试 alt 属性 。 笔 者 故 
意 写 错 文件 名 ， 所 以 无 法 正常 输出 图 片 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch7 2.html</title> 

6 </head> 

7 <body> 

8 xhl>silicon stone Educationc/hi> 

9 <p> 图 片 高 是 199px&nbsp;&nbsp; 图 片 宽 是 158px</p> 
19 <img src="sse, jpe” height="100" width="150"> 
11 《py 使 月 默认 图 片 大 小 </p> 

12 <img src-"Sse,jpg”alt-"SSE Logo 输 出 错误 "> 
13 </body> 

14 </html> 


Silicon Stone Education 
国 乒 王 100px 网 片 室 号 130px 
可 


使 用 可 认 羡 上 大 小 


Esse Loe ~ 


这 个 程序 会 在 执行 第 10 行 输出 第 一 个 图 
片 sse.jpg 时 ， 因 为 本 程序 所 在 的 ch7 文件 夹 没 
有 ssejpg 文件 ， 所 以 此 图 片 文件 名 错误 。 由 于 没 
有 al 属性 指示 输出 替换 文字 ， 所 以 只 能 输出 回 。 
上 述 程序 第 12 行 要 输出 第 二 个 图 片 sejpg， 而 
本 程序 所 在 的 ch7 文件 夹 中 没有 ssejpg， 所 以 
出 现 图 片 文件 名 错误 。 因 为 本 指令 使 用 了 alt 属 
性 指示 输出 替换 文字 ， 所 以 输出 了 加 和 替换 文字 
“SSE Logo 输出 错误 ”。 


HTML5+CSS3 王者 归来 


标示 文件 标题 <figure> 和 <figcaption> 元 素 


<figure> 元 素 主要 是 标示 文件 内 容 所 参照 的 
图 像 、 图 表 、 照 片 或 程序 代码 ， 同 时 这 些 内容 可 
随时 从 文件 中 抽 离 。<figcaption> 元 素 主 要 是 列 
出 文件 内 容 的 名 称 ， 在 本 章 可 以 理解 成 是 图 片 名 
称 ， 这 个 元 素 只 能 在 <figure> 元 素 开头 或 尾 端 使 
用 一 次 。 不 过 这 两 个 元 素 由 其 元 素 名 称 判断 ， 一 
般 最 常用 的 仍 是 标示 图 像 。 
程序 实例 ch7_3.html : 为 文件 内 容 〈 本 例 是 图 
像 ) 加 上 标题 名 称 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch7_3.html</title> 

6 </head> 

7 <body> 

8 <figure> 

9 <img src=" jpg”alt=" 图 片 输出 错误 "> 
19 <figcaption>Mount Rushmore</figcaption> 
11 </figure> 

12 </body> 

13 </html> 


程序 实例 ch7_4.html : 用 <figure> 和 <figcaption> 
标示 表格 。 

1 <ldoctype html> 

2 <html> 

3 <head> 


4 <meta charset="utf-8"> 
ss <title>ch7 4.html</title> 


5 </head> 

7 <body> 

8 <figure> 

4 <table border="1"> 

19 <tr><td> 长 江 </td><td> 中 国 </td><td> 亚 洲 </td></tr> 

11 <tr><td> 尼 罗 河 </td><td> 埃 及 </td><td> 非 洲 ¢/td></tr> 

12 <tr><td> 亚 马 渤 河 </td><td> 巴 西 6/td><td> 南 美洲 </td></tr> 


1 </table> 
14 <figcaption> 世 界 地理 中 心 编 制 </figcaption> 
15 </figure> 

16 </body> 

17 </html> 


7 请 制作 响应 图 


响应 图 可 以 分 为 客户 端 〈Client site) 和 服 
务 器 端 (Server site) 两 类 。 这 两 类 响应 图 的 差 
别 在 于 ， 将 鼠标 指针 指向 图 中 的 热点 时 ， 若 是 客 
户 端的 响应 图 ， 则 启动 浏览 器 的 超 链接 ; 若是 服 
务 器 端的 响应 图 ， 则 由 服务 器 启动 超 链接 。 客 户 
端的 响应 图 ， 由 于 不 会 增加 服务 器 的 负担 以 及 系 
统 流 量 上 的 负荷 ， 一 般 较 常 使 用 。 

响应 图 可 以 当 作 一 般 网 页 的 导航 功能 ， 例 


如 ， 可 以 将 网 站 所 有 功能 制作 成 响应 图 ， 放 在 网 
页 某 一 位 置 ， 方 便 用 户 参 考 。 
7-3-1 建立 地 图 <img> 


车 想 设计 响应 图 ， 首 先 需 定义 一 个 地 图 的 
图 片 。 我 们 可 以 将 此 地 图 想 成 未 来 要 使 用 的 响应 
图 ， 当 然 我 们 必须 为 此 图 片 命名 。 以 上 工作 可 


以 使 用 <img> 元 素 完成 ， 但 必须 加 上 usemap 属 
性 ， 这 个 属性 的 功能 是 给 未 来 要 成 为 响应 图 的 图 
片 命名 。 若 是 我 们 想 将 一 张 地 图 asiamap.jpg 设 
定 为 未 来 使 用 的 响应 图 ， 同 时 响应 图 的 名 称 是 
MyMap， 则 <img> 的 写法 如 下 : 

<img src="asiamap.jpg"usemap= 
"#MyMap"> 

基本 上 usemap 属性 所 定义 的 就 是 未 来 程序 
须 使 用 的 响应 图 名 称 ， 在 设 定时 需 加 上 “#” 符 
号 ， 但 是 未 来 使 用 时 则 不 须 加 上 此 符号 。 


7-3-2 响应 图 <map> 


该 功能 主要 是 将 <img> 所 定义 的 图 片 链接 
至 响应 图 。 如 果 采 用 先前 的 实例 ， 将 MyMap 链 
接 至 响应 图 ， 使 用 <map> 的 写法 如 下 : 


<map name="MyMap"> 
<area … > 


</map> 


7-3-3 定义 响应 图 的 链接 区 域 
<area> 


使 用 <area> 定义 响应 图 的 链接 区 域 ， 需 使 
用 几 个 重要 的 属性 ， 分 别 是 shape、coords、href 
和 alt， 下 面 将 分 别 说 明 。 


DO shape 


shape 的 取 值 有 下 列 4 种 。 

rect : 代表 链接 区 域 是 四 边 形 。 

circle : 代表 链接 区 域 是 圆 形 。 

poly : 代表 链接 区 域 是 多 边 形 。 

default : 一 般 是 用 在 链接 区 以 外 ， 不 执行 任 
何 动作 ， 程 序 设计 时 也 可 省 略 。 
口 ”coords 


coords 主要 是 定义 链接 的 坐标 ， 这 个 坐标 又 
会 因 shape 的 值 而 有 不 同 定义 。 坐 标 在 定义 时 以 
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px 为 单位 ， 左 上 角 是 (0,0)， 向 右 延 伸 为 x 轴 ， 
越 往 右 px 值 越 ; 向 下 延伸 为 y 轴 ， 越 往 下 px 
值 越 大 。shape 在 不 同 状况 时 coords 的 使 用 说 
明 如 下 : 

rect : 需要 4 个 值 ， 分 别 是 左上 角 x 坐标 ，y 
坐标 ; 右 下 角 x 坐标 ，y 坐标 。 

circle : 需要 3 个 值 ， 分 别 是 中 心 点 的 x 坐 
标 ，y 坐标 和 半径 。 

poly : 至 少 需要 6 个 值 ， 如 果 是 3 角形 需要 
6 个 值 ，4 边 形 需要 8 个 值 ， 依 此 类 推 。 所 有 链 
接 区 域 的 端点 以 顺 时 针 方向 列 出 ， 先 列 出 第 一 个 
点 的 x 坐标 和 y 坐标 ， 再 列 出 第 二 个 点 的 x 坐标 
和 y 坐标 ， 其 他 依 此 类 推 。 

default : 如 果 是 default， 则 不 用 指定 坐 
标 值 。 
OD href 

href 用 于 设 定 所 链接 的 文件 或 是 URL。 


纺 本 节 地 图 素材 请 读者 自行 准备 ， 地 图 文件 
名 改 成 代码 中 的 文件 名 即 可 。 


程序 实例 ch7_5.html : 设计 响应 图 。 本 程序 在 
执行 时 会 出 现 一 个 亚洲 地 图 ， 在 这 地 图 中 含有 3 
个 超 链接 ， 当 将 鼠标 指针 指向 超 链 接 区 域 时 ， 窗 
口 左下 方 会 列 出 超 链接 的 地 址 。 如 果 指 向 超 链 接 
区 域 时 按 住 鼠 标 左 键 ， 可 以 看 到 虚线 框 ， 这 个 杠 
就 是 超 链接 区 域 。 正 式 执行 超 链接 时 ， 将 执行 指 
定 的 超 链接 html 文件 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch7 5.html</title> 
6 </head> 

7 <body> 

a <p> 

9 <img src="asiamap,jpg”usemap="#MyMap”alt=" 大 陆 版 的 地 图 "> 

10 <map name="MyMap"> 

11 <area shape="rect” coords="10,19,560,190" 

12 href-"Iussia,html”alt-" 俄 罗斯 "> 

13 <area shape="circle” coords="159,150,190" href="china.html" 
14 ”alt=" 中 国 "> 

15 。 <area shape="poly” coords="250,150,500,100,450,300,250,350" 
16 href="ocean.html”alt=" 太 平 洋 "> 
EN <area shape="default" nohref> 
18 </map> 

19 </p> 

28 </body> 

21 </html> 


HTML5+CSS3 王者 归来 


soviet.html 


1 <ldoctype html> 
2 <html> 

3 ¢head> 

4 <meta charset-"utf-8"> 

二 <title>yrussia.html</title> 

6 <*/head> 

7 <*body> 

8 <h1> 俄 罗斯 </h1> 

9 ximgsrc="zussia ,jpg" alt=" 俄 罗斯 风景 "> 


19 </body> 
11 </html> 
mchina.html 
1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>china.html</title> 
6 </head> 
7 <body> 
8 <h1> 中 国 </h1> 
9 <img src="china,jpg”alt=" 中 国 风景 "> 
19 </body> 
11 </html> 
ocean.html 
1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ocean.html</title> 
6 </head> 
7 <body> 
8 <h1> 太 平 洋 </hi> 
9 <img src="ocean,jpg”alt=" 太 平 洋 风 景 "> 
19 </body> 
11 </html> 


将 鼠标 指针 移 至 “中 国 ”区 超 链 
接 出 现 加 图 。 

如 果 按 住 鼠 标 左 键 不 放 ， 将 看 到 “中 国 ” 
超 链接 的 范围 (虚线 贺 )。 

若是 单 击 ， 可 以 启动 超 链接 ， 此 程序 实例 的 
结果 如 下 : 


中 国 


加 中 国 风味 v 


al 


在 上 述 执行 结果 中 ， 笔 者 故意 在 ch7 文件 来 
不 放 相对 应 的 中 国 风景 图 片 ， 这 将 是 各 位 读者 的 
作业 。“ 俄 罗斯 ” 超 链接 的 范围 是 个 虚线 矩形 。 

“太平 洋 ” 区 超 链接 的 范围 是 个 虚线 四 边 形 。 

上 述 俄罗斯 和 太平 洋 区 的 超 链 接 范 围 已 经 
超出 原 图 片 ， 这 是 故意 的 ， 这 项 修正 也 将 是 各 
位 读者 的 作业 。 
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在 第 6 章 笔者 介绍 了 建立 表格 的 知识 ， 其 实 我 们 也 可 以 在 表格 内 藤 入 图 片 ， 下 面 将 以 实例 说 明 。 
程序 实例 ch7_6.html : 在 ch7 文件 夹 有 rmshmore.jpg 和 yellowstone.jpg 图 文件 ， 本 例会 将 这 两 张 图 


嵌入 表格 内 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 meta charset="utf-8"> 

5 <titleych7 6.html¢/title> 


6 </head> 
7 <body> 

3 <table border="1"> 

9 <thead><!-- 建 立 表 头 --> 

19 <tr><th colspan=~3" 我 的 旅游 地 图 </thy</tr> 


11 <tr><th> 风 景 图 片 </th><th> 地 点 </th></tr> 
12 </thead> 
日 <tbody><1-- 建立 表格 本 笨 --> 


14 <tr> 
15 <td>cimg src="yelloustone.jpg” width="150"></td> 
16 《td 黄石 国 家 公园 <c/td> 

27 </tr> 

18 <tr> 

19 <tdycimg src="rushmore, jpg” width="150">¢/td> 
20 <td> 座 新 山 </td> 


21 /try 
22 </tbody> 
23 </table> 
24 </body> 
25 </html> 


读者 须 留 意 的 是 第 15 行 和 第 19 行 ， 过 去 
表格 的 单元 格 放 的 是 文本 数据 ， 本 例 使 用 <img> 
元 素 嵌 入 的 是 图 片 ， 同 时 为 了 避免 图 片 的 尺寸 太 
大 表格 走样 ， 笔 者 特别 设 定 了 其 宽度 是 150px。 
其 实 未 来 读者 在 设计 这 类 网 页 时 ， 也 可 以 同时 设 
定 图 片 的 高 度 和 宽度 ， 不 过 可 能 会 有 图 片 没有 保 
持 宽 高 比 的 问题 。 
程序 实例 ch7_7.html : 设计 网 页 时 ， 在 同一 行 
中 也 可 以 将 图 片 与 文字 并 列 ， 以 达到 增强 印象 的 
效果 。 本 程序 基本 上 是 修订 前 一 个 程序 实例 ， 将 
用 到 一 个 gf 文件 blueball.gif， 笔 者 将 在 表格 黄 
石 国 家 公园 和 摩 斯 山 字 符 串 前 将 加 上 blueball.gif 
图 形 。 

1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

所 <t 让 le>ch7_7.htm]le</title> 
6 </head> 

7 <body> 


8 <table border="1"> 
9 <thead><1- -建立 表 头 --> 


19 <tr><th colspan="3"> 我 的 旅游 地 图 </th></tr> 

11 <tr><th> 风景 图 片 <:/th><th> 地 点 </th></tr> 

12 </thead> 

13 ”<tbody><1-- 建立 表格 本 体 --> 

14 <tr> 

15 <td><ing src-"yellowstone,jpg” width-"159">¢/td> 
16 <td><ing src="blueball ,gif") 黄 石 国家 公园 </td> 

17 </tr> 

18 <tr> 

19 <td><ing src="rushmore, jpg” width="150"></td> 
20 <td><img src="blueball gif”width="12"> 麻 斯 山 </td> 
21 </tr> 

22 </tbody> 

23 </table> 

24 </body> 

25 </html> 
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blueball.g 这 文件 内 容 如 下 : 


上 述 程序 使 用 两 次 blueball.gif 图 片 ， 却 大 
小 不 同 ， 这 是 笔者 故意 的 ， 用 意 在 于 让 读者 了 
解 在 “黄石 国家 公园 ”字符 串 前 加 上 blueball.gif 
源 文件 ， 与 修正 图 片 大 小 后 的 结果 。 程 序 第 16 
行 笔者 使 用 图 片 的 默认 大 小 ， 发 现 图 形 的 显示 大 
于 字符 串 太 多 ， 似 乎 不 协调 。 有 时 候 碰 上 图 形 与 
字符 串 在 同一 行 显示 时 或 是 想 单独 调整 图 形 大 小 
时 可 以 在 嵌入 图 片 时 ， 具 体 就 直接 指定 图 形 的 宽 
度 ， 具 体 可 参考 程序 第 20 行 。 
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第 4 章 我 们 学 会 了 字符 串 超 链接 的 实现 方 
法 ， 其 实 也 可 以 将 此 方法 应 用 在 所 嵌入 的 图 片 
上 ， 然 后 建立 图 片 的 超 链接 。 此 时 语法 使 用 如 下 
格式 : 

<a href="URL"> 

<img src="URL" alt=" *… " width= 
*" height="…"> 

</a> 


程序 实例 ch7_8.html : 单 击 Silicon Stone 公司 
的 Logo 图 片 ,可 以 进入 Silicon Stone 公司 网 页 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch7_8.html</title> 
</head> 
<body> 
<h2>Silicon Stone Education</h2> 
<p> 


wmaupwNp 
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19 <a href="http://www.siliconstone. com"> 
11 <img src="sselogo. jpg" width="200"> 
12 </a> 
13 </p> 
14 </body> 
15 </html> 
本 
执行 结果 
Silicon Stone Education 


上 述 程序 的 第 11 行 笔者 设 定 了 图 片 宽度 是 
200px， 图 片 的 高 度 将 依 宽度 成 比例 自动 调整 。 
如 果 单 击 图 中 链接 ， 可 以 进入 Silicon Stone 公司 
网 页 。 

图 片 的 超 链接 功能 也 可 以 应 用 在 表格 中 ， 下 
面 将 以 实例 说 明 。 
程序 实例 ch7_9.html : 重新 设计 程序 实例 
ch7_7.html， 为 表格 内 的 2 张 图 片 增加 超 链接 功 
能 ， 相 关 链 接 网 络 信 息 如 下 : 

黄石 国家 公园 : http://www.nps.gov/yell 

摩 斯 山 : http://www.nps/gov/moru 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch7_9.html</title> 


6 </head> 
7 <body> 

8 <table border="1"> 

9 <thead><!- 建立 表 头 --> 

19 <tr><th cotLspan="3"> 我 的 旅游 地 图 </th></tr> 
11 <tr><th> 风 景 图 片 </th><th> 地 点 </th></tr> 

12 </thead> 

13 <tbody><! 一 建立 表格 本 体 一 > 

14 <tr> 

15 <td><! 一 建立 黄石 国家 公园 图 片 以 及 超 链接 一 > 


16 <a href="http://www. nps.gov/yell”> 

17 <img src="yellowstone, jpg" width="150"> 
18 </a> 

19 </td> 

20 <td><img src="blueball.gif"> 黄 石 国家 公园 </td> 
21 </tr> 

22 <tr> 

23 <td><! 一 建立 摩 斯 山 图 片 以 及 超 链接 一 > 

24 <a href="http://www. nps.gov/moru"> 

25 <img src="rushmore. jpg" width="150"> 
26 </a> 

27 </td> 

28 <td><img src="blueball.gif” width="12"> 摩 斯 山 </td> 
29 </tr> 


38 </tbody> 
31 </table> 
32 </body> 
33 </html> 


hapy/wwwnpsgov/yell 


htpywwwnpsgovmoru 

有 关 嵌 入 黄石 国家 公园 图 片 以 及 建立 此 图 片 

的 超 链接 可 参考 第 15 至 19 行 ， 有 关 嵌 入 摩 斯 山 

图 片 以 及 建立 此 图 片 的 超 链接 可 参考 第 23 至 27 

行 。 读 者 单 击 相应 的 图 片 即 可 进入 黄石 国家 公园 
和 摩 斯 山 的 官方 网 页 。 
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相 较 于 前 几 节 ， 这 一 节 内 容 相 对 简单 多 了 。HTML 人 允许 将 图 片 作为 项 目 符号 ， 将 <img> 元 素 放 


在 字符 串 数据 前 方 即 可 ， 下 面 将 以 程序 实例 直接 解说 。 
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程序 实例 ch7_10.html : 在 项 目 数据 “Big Data 
系列 ”前 方 加 上 blueball.gif 图 片 。blueball.gif 的 


内 容 可 参考 程序 实例 ch7_7.html。 Silicon Stone Education 后 


<ldoctype html> 国际 认证 课程 
<htmly 


六 
2 
3 <head> 

4 <meta charset="utf-8"> 
5 

6 

7 

8 


@Big Data 系 列 


<title>ch7_10.html</title> 1. Big Data Knowledge Today 


</head> 
2 Te 
<haysilicon Stone Education</h2> 

9 <h3> 国 际 认证 课程 </h3> 

19 <dl> :3 Pr 3 

11 <dt><img src-"blueball.gif” width-"15">Big Data 系 列 </dt> 这 个 程序 实例 读者 需 留意 第 11 行 ， 是 在 

12 <ol> 二 _ 

13 <liyBig Data knowledge Todayc/liy <dt> 元 素 内 但 在 字符 串 (Big Data 系列 ) 前 加 上 

14 lbR Language Today</11> . 

15 <liySAs Knowledge Today</1i> <img> 元 素 。 

16 </ol> 

17 </dl> 

18 </body> 

19 </html> 


[大 简易 编排 嵌入 图 片 与 文字 


在 结束 本 章 前 ， 笔 者 以 一 个 程序 做 总 结 ， 这 个 程序 主要 是 在 同一 行 中 分 别 放 入 大 小 不 一 的 图 
片 ， 并 穿插 文字 。 读 者 可 以 由 执行 结果 体会 HTML 文件 的 编排 。 
程序 实例 ch7_11.html : 同一 行 穿插 大 小 不 一 图 片 与 文字 的 应 用 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch7_11.html</title> 

6 </head> 

7 <body> 

8 <h1> 我 的 旅游 经 验 </h1> 

9 <p> 

19 黄石 国家 公园 cimg src="yellowstone, jpg” width="269">&nbspj&nbsp; 
11 拉 什 莫 尔 <img src="rushmore, jpg” width="169"> 

12 </p> 

13 <p> 

14 <img src="mountain,.jpg”width="199"> 高 山 市 anbspj&nbsp; 
15 <img src="village,png”width="299"> 合 掌 村 

16 </p> 

17 </body> 

18 </html> 


执行 结果 


我 的 旅游 经 验 


HTML5+CSS3 王者 归来 
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GIF 格式 是 HTML 支持 的 一 种 图 片 格式 
这 种 图 片 格式 支持 用 动画 方式 呈现 内 容 。 网 络 上 
有 很 多 的 免费 GIF 动画 可 以 下 载 ， 一 个 网 页 加 
上 些许 的 动画 可 以 产生 更 加 精彩 的 效果 。 请 进入 
网 页 http://gifgifs.com， 将 看 到 如 下 画面 。 


可 以 单 击 喜欢 的 GIF 动画 类 别 ， 本 例 笔者 
选择 Sports， 将 看 到 如 下 结果 。 


START DOWNLOAD 


3 Steps to Free Online Forms 
.Clckto Begn 
2 Downiand 


App 
3 Search Govenmentroms -Instantly 


接着 在 提供 超 链接 的 Direct link 字段 处 ， 笔 
者 复制 了 此 超 链接 。 


程序 实例 ch7_12.html : 利用 动态 的 GIF 图 形 
作为 超 链 接 ， 重 新 设计 程序 实例 ch7_10.html。 
请 注意 ， 如 果 发 生 此 程序 无 法 执行 的 情况 代表 这 
个 超 链 接 被 移 走 了 。 


1 <ldoctype htmly 
2 <html> 

3 <head> 

4 ceta charset="utf-8"> 

5 <titleych7 12.html</title> 
7 

日 


Stone Educationc/hay 
/hay 


2 ol 
14 <lipB18 Data knouledge Todaye/117 
15 <li>R Language Todayc/1i7 

35 <liySAS knowledge Today</1i> 


28 </html: 

执行 结果 

Silicon Stone Education 全 

国际 认证 课程 

Big Data 系 列 
1. Big Data Knowledge Today 
2. R Language Today | 
3. SAS Knowledge Today v 

相 较 于 程序 实例 ch7 10.html， 上 述 


Bouncing_ball 动画 应 该 比 静态 的 blueball.gif 精 
彩 吧 ! Internet 上 免费 资源 有 许多 ， 读 者 可 以 用 
下 面 的 关键 词 查询 。 

Free GIF 动画 

说 记 ， 有 注 明 免费 资源 的 即 可 使 用 ， 有 些 资 
源 未 注 明 ， 可 能 需 付 费 ， 请 尊重 知识 产权 ， 就 付 
费 使 用 吧 ! 预 祝 读者 学 习 愉快 。 
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习题 
1. 请 为 ch7_5.html 内 的 超 链 接 文件 增加 图 片 。 此 程序 有 一 个 缺点 是 笔者 故意 不 设 定 图 片 的 长 度 与 高 
度 ， 因 此 影像 地 图 区 域 超出 地 图 尺寸 ， 请 修改 此 缺点 。 

2. 请 摊 开 自己 所 在 省 份 的 地 图 ， 为 所 有 县 市 建立 一 个 响应 图 。 地 图 越 精确 越 好 ， 超 链接 后 所 获得 的 
结果 请 自行 发 挥 创 意 。 

3. 请 以 响应 图 形式 设计 3X3 的 井 字 响应 区 ， 即 有 9 个 超 链接 可 以 设计 。 请 读者 自行 发 挥 ， 让 这 9 个 
超 链接 具有 娱乐 效果 。 

4. 请 参考 程序 实例 ch7_6.html， 设 计 各 位 的 旅游 地 图 ， 每 个 地 点 需 有 3 张 以 上 图 片 ， 同 时 需 有 10 个 
地 点 。 叙 述 不 完全 的 地 方 ， 读 者 可 以 自行 发 挥 创 意 ， 美 化 整个 网 页 版 面 。 

5. 请 建立 一 个 表格 ， 这 个 表格 内 有 班 上 每 位 同学 的 相片 ， 相 片 下 方 有 姓名 。 本 题目 内 容 叙述 不 完全 
的 地 方 ， 读 者 可 以 自行 发 挥 创 意 ， 美 化 整个 网 页 版 面 。 

6. 请 搜集 国内 10 个 电台 设计 一 个 表格 。 这 个 表格 需要 有 电台 代表 图 片 、 频 道 、 地 点 〈 城 市 )、 电 话 和 代 
表 性 节目 。 令 图 片 可 以 超 链接 方式 链接 至 这 家 电台 的 官方 网 站 。 


设计 多 媒体 网 页 


本 章 摘要 
8-1 播放 影片 <video> 元 素 8-5 嵌入 资源 文件 <embed> 元 素 
8-2 播放 声音 <audio> 元 素 8-6 府 入 对 象 <object> 元 素 


8-3 ”指定 多 个 播放 文件 <source> 元 素 ”8-7 设 定 说 入 对 象 的 参数 <param> 元 素 
8-4 为 影片 加 入 字幕 功能 <track> 元 素 ”8-8 建立 嵌入 的 浮动 框架 <iframe> 元 素 


设计 网 页 时 若是 增加 影片 和 声音 组 件 ， 可 以 让 整个 网 页 更 加 精彩 丰富 。 

早期 使 用 者 若 想 要 正常 浏览 带 有 影片 和 声音 组 件 的 多 媒体 网 页 ， 需 要 在 浏览 器 端 安装 外 挂 
(Plug-in) 的 RealPlayer 或 QuickTime Player(Apple 网 站 的 影音 ) 等 程序 ， 后 期 则 是 需 安装 
Adobe Flash 等 。 例 如 ， 若 是 想 欣 赏 Apple 网 站 的 影音 文件 ， 需 安装 QuickTime Player， 若 
是 想 欣 赏 YouTube 影音 文件 ， 需 安装 Adobe Flash。 

但 麻烦 的 是 ，Apple 公司 的 iOS 不 支持 外 挂 Adobe Flash、 各 公司 的 影片 和 声音 组 件 格式 不 
尽 相同 、 安 装 插件 不 一 定 可 以 正常 浏览 这 些 影片 和 声音 等 多 媒体 文件 、 各 浏览 器 开发 公司 又 制定 
了 一 些 特别 的 元 素 处 理 多 媒体 元 素 。 以 上 缺点 不 仅 困扰 浏览 网 页 的 我 们 ， 也 困扰 着 网 页 设计 师 。 

W3C 推出 的 HTML5 解决 了 上 述 问 题 。HTML5 的 <video> 和 <audio> 元 素 提供 了 标准 
接口 技术 ， 未 来 不 再 需要 插件 ， 只 要 浏览 器 支持 HTML5， 就 可 以 正常 欣赏 网 页 上 的 影片 或 声音 
等 多 媒体 元 素 了 。 

本 章 笔 者 除了 介绍 HTML5 的 新 元 素 <video> 和 <audio> 外 ， 也 将 针对 旧版 但 是 HTML5 
仍然 推荐 使 用 的 其 他 多 媒体 元 素 做 一 个 完整 的 说 明 z 
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:可 加 播放 影片 <video> 元 素 


在 设计 的 网 页 中 使 用 <video> 元 素 后 ， 只 要 浏览 器 支持 HTML5， 就 不 再 需要 安装 插件 来 欣赏 影 
片 了 。<video> 元 素 目 前 支持 3 种 影片 文件 格式 : 
口 MP4 

这 是 标准 视频 文件 格式 ， 优 点 是 压缩 质量 佳 ， 传 送 文件 容易 ， 广 泛 应 用 在 各 大 影音 分 享 网 
站 ， 它 的 扩展 名 是 MP4。Apple 公司 将 此 视频 文件 格式 MP4 扩充 为 M4V， 广 泛 应 用 在 iPhone、 
iPod 和 PlayStation Portable 上 。 本 书 所 使 用 的 影片 文件 大 部 分 使 用 iPhone 拍摄 ， 所 以 扩展 名 皆 
是 M4V。 
0 OGG 

这 是 自由 开放 标准 的 多 媒体 文件 格式 ， 应 用 在 影片 上 的 编码 格式 是 Theora 编码 格式 ， 扩 展 名 是 
OGV， 不 受 软 件 专利 限制 ， 目 前 由 Xiph.org 基金 会 维护 。 
口 WEBM 

这 是 Google 资助 项 目 开发 的 版 权 免费 的 影片 文件 格式 ， 扩 展 名 是 WEBM。 这 个 影片 文件 格式 
能 提供 高 质量 的 影片 压缩 供 HTMLS5 使 用 。 目 前 编码 格式 是 VP8， 后 续 版 本 是 VP9。 

<video> 元 素 的 使 用 格式 如 下 : 

<video 属性 > … </video> 

其 中 属性 内 容 如 下 : 
.Ore 

sre 属性 用 于 设 定 影片 文件 的 URL。 不 过 因为 影片 文件 的 格式 有 许多 ， 不 同 的 浏览 器 对 于 影片 
文件 格式 的 支持 各 不 相同 ， 如 果 想 要 一 次 设 定 多 种 影片 文件 ， 可 以 使 用 source 元 素 取代 src 属性 。 
source 元 素 也 是 HTML5 的 新 增 元 素 ， 笔 者 将 在 8-3 节 介绍 。 
口 poster 

这 个 属性 用 于 设 定 影片 播放 前 要 显示 图 片 文件 的 URL。 这 个 图 片 设计 很 重要 ， 一 个 精彩 的 图 片 
可 以 增加 点 击 率 。 读 者 也 可 以 将 此 图 片 设想 成 一 部 电影 的 海报 ， 它 需要 有 丰富 、 可 以 吸引 消费 者 点 
击 欣 赏 的 元 素 。 
DD preload 

这 个 属性 用 于 设 定 当 浏览 者 进入 网 页 时 是 否 要 预先 下 载 影 片 文件 。 可 以 有 下 列 3 种 值 : 

auto : 这 是 预 设 值 ， 由 浏览 器 决定 。PC 设备 的 浏览 器 因为 宽带 使 用 方便 会 直接 下 载 ， 但 是 移动 
设备 的 浏览 器 则 因 网 络 流 量 牵涉 费用 比较 昂贵 ， 所 以 不 会 事先 下 载 。 

metadata : 只 下 载 meta 数据 ， 例 如 播放 时 间 、 影 片 尺 寸 、 第 一 个 画 格 图 片 和 影片 标题 等 。 

none : 不 下 载 。 
口 autoplay 

如 果 设 定 这 个 属性 ， 则 当 影 片 加 载 完 成 就 自动 播放 。 不 过 除了 一 些 特别 广告 需求 的 影片 ， 不 对 


HTML5+CSS3 王者 归来 


议 设 定 这 个 属性 ， 最 好 是 让 用 户 自 己 点 击 再 播放 较 佳 。 


口 _mediagroup 


如 果 要 同时 播放 多 个 影片 ， 且 文件 的 URL 相同 时 ， 可 用 这 个 属性 组 成 群 组 方式 播放 。 


口 loop 

若 使 用 这 个 属性 时 ， 影 片 会 重复 循环 播放 。 
口 _muted 

若 使 用 这 个 属性 时 ， 影 片 播放 时 会 静音 。 


口 controls 


若 使 用 这 个 属性 时 ， 影 片 播放 时 会 出 现 播 放 控制 器 ， 类 似 看 电视 时 的 遥控 器 。 


DO height/width 


这 个 属性 可 以 设 定 影片 画面 的 高 度 (height) 和 宽度 (width)。 设 定时 要 特别 留意 是 否 同时 设 定 
高 度 和 宽度 ， 如 果 两 个 属性 同时 设 定 ， 但 是 比例 与 原 影 片 尺寸 不 同 ， 会 出 现 空白 区 域 ; 如 果 只 设 定 
一 个 尺寸 ， 另 一 个 尺寸 将 自动 依 比例 调整 。 笔 者 建议 只 设 定 width 宽度 ， 高 度 让 影片 依 比例 调整 。 


如 果 不 设 定 此 属性 ， 则 使 用 影片 原始 尺寸 。 
程序 实例 ch8_1.html : 制作 一 个 简单 的 影片 播 
放 网 页 。 这 个 网 页 将 播放 mongolia.m4v 文件 ， 
这 是 MP4 格式 的 影片 文件 ， 影 片 拍摄 地 点 是 蒙 
古国 乌 兰 巴 托 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>ch8 1.html</title> 
6 </head> 

7 <body> 

8 <h1y 蒙 古 乌 兰 巴 托 </h1> 

9 <video src="mongolia.mAv"> 
19 </video> 

11 </body> 

12 </html> 


蒙古 乌 兰 巴 托 


< 


由 于 这 个 影片 画面 尺寸 很 大 ， 窗 口 只 显示 了 


部 分 画面 ， 必 须 放 大 窗口 才 可 完全 欣赏 ， 另 外 这 
个 影片 只 能 看 到 部 分 画面 ， 无 法 整个 欣赏 ， 下 面 
笔者 将 逐步 改良 这 个 程序 。 

程序 实例 ch8_2.html : 重新 设计 程序 实例 
ch8_1.html， 将 播放 尺寸 宽度 设 为 500px。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch8 2.html</title> 
6 </head> 

7 <body> 

8 “<h1> 蒙 古 乌 兰 巴 托 </h1> 

9 <video src="mongolia.mAv” width="560"> 
19 </video> 

11 </body> 

12 </html> 


上 述 程序 改良 了 影片 大 小 。 


蒙古 乌 兰 巴 托 


程序 实例 ch8_3.html : 重新 设计 程序 实例 
ch8_2.html， 为 影片 加 上 播放 控制 器 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 tmeta charset="utf-8"> 

5 《titJeych8 3.html</title> 

6 </head> 

7 <body> 

8 <h1> 藻 古 乌 兰 巳 托 </h1> 

9 <video src="mongolia.m4y"” width="500" controls> 
16 </video> 

11 </body> 

12 </html> 


蒙古 乌 兰 巴 托 


程序 实例 ch8_4.html : 重新 设计 程序 实例 
ch8_3.html， 使 影片 在 启动 后 循环 播放 ， 不 主 
动 停止 。 要 结束 播放 需 单 击 播放 控制 器 的 
停止 钮 贺 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch8 4.html</title> 
6 </head> 

7 <body> 

8 <h1> 蒙 古 乌 兰 巴 托 </h1> 


9 <video src="mongolia.m4v”width="569”controls loop> 
19 </video> 


11 </body> 
12 </html> 

由 于 本 程序 执行 结果 画面 与 前 一 程序 相同 ， 
所 以 不 再 给 出 窗口 画面 。 


程序 实例 ch8_5.html : 重新 设计 程序 实例 
ch8_4.html， 使 此 影片 播放 时 静音 。 


<ldoctype html》 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch8 5.html</title> 
</head> 
<body> 
<h1> 蓉 十 乌 兰 巴 托 </h1> 
<video src="mongolia.mav" width="500" controls loop muted> 
10 </videoy> 
11 </body> 
12 </html> 


mYNaupwuNp 


vo 
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由 于 本 程序 执行 结果 画面 与 前 一 程序 相同 ， 
所 以 不 再 给 出 窗口 画面 。 
程序 实例 ch8_6.html : 重新 设计 程序 实例 
ch8_5.html， 去 掉 静 音 和 重复 循环 播放 功能 ， 但 
是 增加 自动 播放 功能 。 


1 《ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>che 6.html</title> 
6 《/head> 

7 <body> 

8 <h1> 蒙 古 乌 兰 巴 托 </hl> 

9 《video src-"mongolia.mAy" width="588" controls autoplay> 
19 </video> 

11 </body> 

12 </html> 


只 要 进入 此 网 页 将 自动 播放 影片 。 由 于 本 程 
序 执行 结果 画面 与 前 一 程序 相同 ， 所 以 不 再 给 出 
窗口 画面 。 
程序 实例 ch8_7.html : 重新 设计 程序 实例 ch8_6. 
html， 去 掉 自 动 播放 功能 ， 但 是 播放 前 要 显示 
airportjpg 文件 ， 文 件 内 容 是 乌 兰 巴 托 机 场 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset-"utf-8"> 
5 <titleych8_7.html</titley 
6 </head> 

7 <body> 

8 “<h1> 获 古 乌 兰 巴 托 </hl> 

9 <video src-"mongoliamav" 
19 </video> 

11 </body> 

12 </html> 


width-"599”poster="airport,jpg”controlsy 


程序 实例 ch8_8.html : 这 个 程序 将 重新 设计 程序 
实例 ch8_ 7html， 去 掉 播 放 前 显示 的 airportjpg 文 
件 ， 并 且 设 定 进入 网 页 时 ， 先 不 下 载 影片 文件 ， 

也 就 是 增加 preload 属性 ， 同 时 将 此 属性 设 定 为 


“none”。 
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1 <ldoctype html = 
a EE 和 二 和 ”下 图 是 在 Google Chrome 中 的 测 
3 <head> 、 

4 <meta charset="utf-8"> 试 结果 。 

5 <title>ch8 8.html</title> 

6 </head> 蒙古 乌 兰 巴 托 


7 <body> 
8 <h1> 蒙 古 乌 兰 巴 托 c/hl> 

9 <video src="mongolia.mAv" width="580" preload="none” controls> 
19 </video> 

11 </body> 

12 </html> 


的 。 


加 


由 于 不 先 下 载 影片 ， 所 以 窗口 中 呈现 空白 屏幕 。 


sy 民 播放 声音 <audio> 元 素 


设计 网 页 可 使 用 <audio> 元 素 ， 未 来 只 要 浏览 器 支持 HIML5， 就 不 再 需要 安装 插件 播放 音乐 


。<audio> 元 素 目前 支持 3 种 声音 文件 格式 : 


MP3 

这 是 数字 音频 编码 格式 ， 它 会 把 对 人 类 听觉 不 重要 的 数据 舍弃 ， 达 到 将 文件 压缩 至 最 小 的 目 
目前 此 格式 广泛 应 用 在 各 大 语音 分 享 网 站 ， 它 的 扩展 名 是 MP3。 

OGG 

这 是 自由 开放 标准 的 多 媒体 文件 格式 ， 应 用 在 声音 上 的 编码 格式 是 Vobis 编码 格式 ， 扩 展 名 是 


OGG, 不 受 软 件 专利 限制 ， 目 前 由 Xiph.org 基金 会 维护 。 


目 


AAC 
英文 全 名 是 Advanced Audio Coding， 可 翻译 为 高 级 音频 编码 ， 它 是 由 世界 科技 大 厂 AT&T、 


SONY、 杜 比 实验 室 和 Fraunhofer IS 共同 开发 的 。 目 前 这 种 格式 的 编码 扩展 名 有 3 种 。 


口 


AAC : 使 用 MPEG-2 格式 ， 这 是 传统 的 AAC 编码 。 

MP4 : 使 用 MPEG-4 格式 。 

M4A : Apple 公司 开发 ， 为 了 区 别 MP4 文件 ， 将 扩展 名 更 改 为 M4A。 

<audio> 元 素 在 HTML 的 使 用 格式 如 下 : 

<audio 属性 > … </audio> 

上 述 属 性 内 容 如 下 : 

src 

设 定 声音 文件 的 URL。 不 过 因为 声音 文件 的 格式 有 许多 ， 不 同 的 浏览 器 对 于 声音 文件 格式 的 支 


持 不 相同 ， 如 果 想 要 一 次 设 定 多 种 声音 文件 ， 可 以 使 用 <source> 元 素 取 代 此 src 属性 。<source> 元 
素 也 是 HTML5 的 新 增 元 素 ， 笔 者 将 在 8-3 节 介绍 。 
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DO preload 
这 个 属性 用 于 设 定 浏览 这 个 网 页 时 是 否 要 预先 下 载 声音 文件 。 可 以 有 下 列 3 种 值 : 
auto : 这 是 预 设 值 ， 由 浏览 器 决定 。PC 设备 的 浏览 器 因为 宽带 使 用 方便 会 直接 下 载 ， 但 移动 装 
置 的 浏览 器 则 因 网 络 流量 牵涉 费用 比较 昂贵 ， 所 以 不 会 事先 下 载 。 
metadata : 只 下 载 meta 数据 ， 例 如 播放 时 间 、 第 一 个 画 格 图 片 和 声音 标题 。 
none : 不 下 载 。 
DO autoplay 
如 果 设 定 这 个 属性 ， 则 当 声 音 文件 加 载 完成 后 就 自动 播放 。 不 过 除了 一 些 特别 广告 需求 的 音 
乐 ， 不 建议 设 定 这 个 属性 ， 最 好 是 让 用 户 自己 点 击 再 播放 较 佳 。 
DD mediagroup 
如 果 要 同时 播放 多 个 声音 文件 ， 且 URL 相同 时 ， 可 使 用 此 属性 用 群 组 方式 播放 。 
口 loop 
若 出 现 这 个 属性 时 ， 声 音 会 循环 播放 。 
口 _muted 
若 出 现 这 个 属性 时 ， 声 音 文 件 会 静音 播放 。 
DO controls 


mJ oupwWNp 


- 


10 
11 
12 


若 出 现 这 个 属性 时 ， 声 音 文件 播放 会 出 现 播放 控制 器 ， 播 放 控制 器 类 似 于 CD 音响 的 遥控 器 。 
程序 实例 ch8_9.html : 一 个 有 问题 的 声音 播放 
程序 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch8_9.html</title> 
</head> 
<body> 
<hl>My sound</h1l> 
<audio src="hello.m4a"> 
</audio> 
</body> 
</html> 


My sound 


当 看 到 上 述 执 行 结果 时 ， 你 可 能 以 为 是 程序 


设计 错误 ， 可 又 不 知道 问题 出 在 哪里 ， 其 实 最 大 
问题 是 声音 不 像 影片 可 以 看 到 画面 。 下 面 是 对 上 
例 的 改良 版 本 。 


程序 实例 ch8_10.html : 改良 ch8_9.html， 增 
加 控制 播放 器 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


</head> 
<body> 
<hl>My Sound</hl> 


1 
2 
3 
4 
5 <title>ch8_10.html</title> 
6 
7 
8 


9 <audio src="hello.m4a" controls> 
19 </audio> 
11 </body> 
12 </html> 


件 ， 右 边 的 控件 则 用 来 进行 音量 控制 。 


My sound 


单 击 播放 器 左边 播放 按钮 可 以 播放 声音 
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程序 实例 ch8_11.html : 重新 设计 程序 实例 
ch8_10.html， 使 此 声音 在 启动 后 循环 播放 ， 不 
主动 停止 。 要 结束 播放 须 单 击 播放 控制 器 的 停止 
按钮 回 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch8_11.html</title> 
6 </head> 

7 <body> 

8 <hl>My sound</h1> 

9 <audio src="hello.m4a" controls loop> 
10 </audio> 

11 </body> 

12 </html> 


由 于 本 程序 执行 结果 画面 与 前 一 程序 相同 ， 
所 以 不 再 给 出 窗口 画面 。 
程序 实例 ch8_12.html : 重新 设计 程序 实例 
ch8_11.html， 使 此 声音 文件 静音 播放 。 
1 <!doctype html> 
2 <html> 
3 <head> 


4 <meta charset="utf-8"> 
§ <title>ch8_12.html</title> 


6 </head> 
7 <body> 

8 <hl>My sound</hl> 

9 <audio src="heLto.m4a” controls loop muted> 
19 </audio> 

11 </body> 

12 </htmt> 


由 于 本 程序 执行 结果 画面 与 前 一 程序 相同 ， 
所 以 不 再 给 出 窗口 画面 。 
程序 实例 ch8_13.html : 重新 设计 程序 实例 
ch8_12.html， 去 掉 静 音 和 重复 循环 播放 功能 ， 
增加 自动 播放 功能 。 


1 <!doctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch8_13.html</title> 
6 </head> 

7 <body> 

8 <hl>My sound</h1> 

9 <audio src="hello.m4a" controls autoplay> 
10 </audio> 

11 </body> 

12 </html> 


浏览 此 网 页 将 自动 播放 影片 。 由 于 本 程序 执 
行 结果 画面 与 前 一 程序 相同 ， 所 以 不 再 给 出 窗口 
画面 。 


:本 让 指定 多 个 播放 文件 <source> 元 素 


这 个 元 素 必 须 存 在 于 <audio> 或 <video> 元 素 内 。 在 <audio> 或 <video> 内 的 src 属性 只 能 设 定 
一 个 文件 ， 但 是 使 用 <source> 元 素 则 可 以 设 定 多 个 文件 。 浏 览 器 会 由 上 往 下 确认 文件 可 否 执 行 ， 一 


旦 确认 文件 可 以 执行 ， 将 忽略 下 面 的 内 容 。 


设计 网 页 含 多 媒体 文件 时 ， 由 于 各 浏览 器 支持 的 情况 不 一 ， 所 以 一 个 影片 或 声音 文件 若是 可 以 存 
成 多 种 格式 ， 利 用 <source> 来 同时 设 定 ， 就 可 以 避免 因 浏览 器 不 支持 而 无 法 浏览 这 个 多 媒体 文件 。 


<source> 元 素 的 使 用 格式 如 下 : 


<source src=" 文件 的 URL"” 其 他 属性 > 


上 述 属性 说 明 如 下 : 


口 src 


这 是 必要 的 属性 ， 用 于 设 定 影片 或 声音 文件 的 URL。 


口 type 


type 用 于 配置 文件 的 MIME 类 型 《下 面 会 解说 )。 若 加 上 这 个 设 定 ， 则 先 由 这 个 类 型 让 浏览 器 


判断 可 否 执 行 。 
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口 _media 


可 以 由 此 属性 设 定 在 哪 一 种 媒体 设备 中 播放 ， 电 视 机 是 “tv”、PC 屏幕 是 “screen”， 移 动 设备 
是 “handheld”， 默 认 值 是 “all”， 表 示 可 以 在 所 有 设备 中 。 


MIME 概念 的 说 明 


MIME 的 英文 全 名 是 Multipurpose Internet Mail Extensions， 可 以 解释 为 多 用 途 因特网 邮件 扩 
展 。 早 期 电子 邮件 无 法 使 用 7 位 ASCI (0-127) 字符 集 以 外 的 字符 ， 所 以 非 英文 字符 、 声 音 或 图 像 
等 非 英文 信息 皆 无 法 通过 电子 邮件 传送 。MIME 制定 了 各 种 数据 表示 法 ， 让 电子 邮件 可 以 传送 各 类 文 
件 。 后 来 MIME 框架 也 被 应 用 在 HTTP 协议 内 ， 所 以 也 成 为 了 因特网 媒体 类 型 的 标准 。 

在 MIME 架构 下 的 内 容 基本 格式 如 下 : 

type/subtype 


常见 的 type 使 用 格式 有 : 
text : 文本 。 

image : 图 片 。 

audio : 声音 。 

video : 影片 。 

subtype 只 用 于 指定 type 的 详细 格式 ， 常 见 的 组 合 如 下 : 
text/plain : 纯 文 本 。 

text/html : HTML 文件 。 
image/gif : GIF 图 像 文件 。 
image/png : PNG 图 像 文件 。 
image/jpeg : JPEG 图 像 文 件 。 
video/mp4 : MP4 视频 文件 
video/ogg : OGG 视频 文件 
video/webm : WebM 视频 文件 


程序 实例 ch8_14.html : <source> 元 素 的 应 用 。 


1 <ldoctype html> 

2 <html> a 

3 <head> 蒙古 乌 兰 巴 托 
4 <meta charset="utf-8"> 

近 <title>ch8_14.html</title> 

6 </head> 

7 <body> 

8 “hl 蒙古 乌 兰 巴 托 c/h1> 

9 “video width="569”controls> 

19 <source src="mongolia.webm" type="video/webm"> 


11 <source src="mongolia.ogg™” type="video/ogg"”> 
12 <source src="mongolia.mAv™ type="video/mp4"> 
13 <p> 浏 览 器 不 支持 此 影 文件 </p> 

14 </video> 

15 </body> 

16 </html> 
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上 述 程序 执行 到 第 12 行 时 ， 浏 览 器 可 以 找到 mongoliam4v 文件 ， 由 于 支持 此 格式 ， 所 以 就 播 
放 影片 文件 ， 而 忽略 输出 第 13 行 的 字符 串 。 上 述 第 13 行 代码 的 作用 是 如 果 浏 览 器 不 支持 <video> 
元 素 时 ， 可 以 显示 此 字符 串 。 


为 影片 加 入 字幕 功能 <track> 元 素 


<track> 元 素 的 功能 是 为 能 入 的 影片 或 声音 文件 加 上 字幕 ， 所 以 这 个 元 素 只 能 放 在 <audio> 和 
<video> 元 素 内 ， 同 时 这 个 元 素 需 放 在 <source> 元 素 后 面 。 它 的 使 用 格式 如 下 : 

<track src=" 字幕 的 URL" 其 他 属性 > 

上 述 属性 内 容 如 下 : 
日 “sre 


这 是 必要 的 属性 ， 用 于 设 定 字 幕 文件 的 URL。 这 个 字幕 文件 需 是 WebVTT 的 文件 格式 ， 扩 展 名 
是 .vtt。 有 关 认 识 WebVTT 的 文件 格式 与 如 何 建立 WebVTT 文件 8-4-1 节 会 解说 。 


D 口 kind 


kind 设 定 字幕 的 种 类 ， 可 以 有 下 列 几 个 设 定 : 

subtitles : 这 是 默认 选项 。 如 果 省 略 kind 属性 ， 浏 览 器 视 其 设 定 为 subtitles， 显 示 或 是 翻译 影片 
对 话 内 容 ， 一 般 用 于 可 以 听见 声音 但 不 懂 语言 和 内 容 的 人 。 

captions : 显示 或 是 翻译 影片 对 话 内 容 、 声 音信 息 或 音效 ， 一 般 用 在 无 法 播放 声音 的 环境 或 观众 
有 听觉 障碍 时 。 

chapters : 用 于 影片 的 开头 标题 或 是 影片 选项 。 例 如 影片 有 30 集 ， 可 用 这 种 字幕 制作 影片 选项 。 

description : 用 于 影片 内 容 的 说 明 ， 一 般 用 在 无 法 看 到 影像 的 环境 或 观众 有 视觉 障碍 时 ， 具 有 将 


字幕 转换 成 声音 的 潜在 应 用 。 
metadata : 用 于 不 在 屏幕 上 显示 字幕 。 
口 srclang 


用 于 指定 字幕 语言 : 台湾 繁体 中 文 是 “zh-tw”， 简 体 中 文 是 “zh-cn”， 英 文 是 “en”， 美 式 英 文 
是 “en-US”， 日文 是 “ja”， 德 文 是 “de”， 法 文 是 “fr”。 若 kind 属性 是 subtitles 或 没有 kind 属性 
时 ， 一 定 要 在 <track> 元 素 内 加 上 这 个 属性 。 


口 label 
字幕 轨道 的 标记 ， 当 字幕 轨道 有 多 个 时 ， 可 以 用 它 列 出 辨别 字幕 。 
口 default 


即使 影片 只 有 一 个 track， 也 必须 要 加 上 这 个 属性 。 如 果 <track> 元 素 内 有 多 个 字幕 轨道 时 ， 可 
以 用 default 指定 预 设 字幕 轨道 。 
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8-4-1 认识 与 建立 WebVTT 文件 


WebVTT 文件 采用 UTF-8 编码 格式 ， 放 在 <track> 标记 内 ， 目 的 是 为 <video> 元 素 内 的 影片 
文件 显示 字幕 。 它 的 MIME type 类 型 是 “text/vtt”。 可 以 使 用 Windows 操作 系统 的 记事 本 编辑 
WebVTT， 在 保存 文件 时 需 执行 下 列 设 定 : 


模 守 名 入 (N): [ipvtt v 
sn 
Sm su Hs | 


在 保存 类 型 需 选 择 “ 所 有 档案 ”， 编 码 需 选 “UTF-8”， 在 文件 名 输入 框 则 输入 文件 名 。 这 个 文 
件 名 需 同时 注 明 扩展 名 ， 在 上 述 实例 笔者 将 WebVTT 文件 以 trip.vtt 为 文件 名 保存 。 
WebVTT 文件 是 有 一 定格 式 的 ， 笔 者 以 实际 范例 做 解说 。 


WEBVTT 


Welcome to Mongolia Prairie 


1 
2 
Sl 
本 00:00.000 --> 00:06.000 
5 
6 BY Jiin-Kwei Hung 

8 


2 
9 00:06.500 --> 00:12.000 
10 Thank You for Watching this Video 
el 3 


13 00:12.050 --> 00:18.000 
14 The End 


范例 中 ， 第 1 行 一 定 是 WEBVTT， 用 来 告知 这 是 WebVTT 文件 。 在 第 3、8 和 12 行 的 阿拉 伯 
数字 编号 称 cue， 可 以 想 成 时 间 节 点 ， 由 此 可 知 上 例 共有 3 个 时 间 节 点 ， 时 间 节 点 也 就 是 我 们 要 设计 
字幕 的 时 间 点 。 由 第 4 行 可 知 时 间 节 点 是 0 分 0 秒 至 0 分 6 秒 ， 时 间 节 点 的 格式 如 下 : 

HH:MM:SS.sss 

如 果 影 片 不 长 可 以 省 略 “HH”， 所 以 在 上 例 只 显示 “MM:SS.sss” 由 上 例 第 3 行 至 第 6 行 可 
知 ， 在 第 1 个 时 间 节 点 0 秒 至 6 秒 间 显 示 2 行 英文 字 ， 这 就 是 字幕 ， 字 幕 可 以 有 1 行 到 多 行 ， 以 下 
是 此 范例 的 字幕 : 

Welcome to Mongolia Prairie 

By Jiin-Kwei Hung 

所 显示 的 字幕 数据 会 在 屏幕 中 居中 对 齐 。 在 时 间 节 点 的 起 点 和 终点 间 需 以 “-->” 隔 开 ， 同 时 隔 
开 符 号 与 时 间 数 据 间 需 空 一 格 。 在 第 2 个 时 间 节点 6.5 秒 至 12 秒 间 显示 下 列 英文 : 

Thank You for Watching this Video 

在 第 3 个 时 间 节 点 12.05 秒 至 18 秒 间 显示 下 列 英文 : 

The End 

其 实在 设计 WebVTT 时 ， 上 例 算是 简单 的 。 在 许多 情况 下 会 因为 影片 中 有 对 话 出 现 ， 必 须 很 精 
确 地 计算 对 话 的 时 间 节 点 ， 使 用 记事 本 编辑 会 花费 许多 工时 。 
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8-4-2 HTML5 Video Caption Maker 


HTMLS5 Video Caption Maker 是 一 个 免费 为 
影片 文件 建立 字幕 的 工具 。 获 取 该 工具 软件 的 方 
法 是 ， 首 先 使 用 百度 搜索 关键 词 “HTML5 Video 
Caption Maker ”。 


Ba Tas ve co 


然后 可 以 看 到 如 上 图 所 示 的 网 址 ， 单 击 即 可 
进入 此 网 站 。 


HTMLS Video Caption Maker 


在 上 图 所 示 的 页 面 中 执行 如 下 几 个 步骤 : 

(1) 输入 影片 所 在 的 URL。 

(2) 文件 格式 选 WebVTT。 

(3) 单 击 控制 播放 器 的 图 按钮 或 Play 按钮 
即 可 让 影片 开始 放映 。 

(4) Pause 按钮 可 以 暂停 播放 ， 这 时 可 以 

输入 字幕 。 下 图 所 示 为 在 时 间 节 点 约 6 秒 处 暂 
停 ， 然 后 笔者 输入 字幕 的 画面 。 


在 上 图 所 示 的 画面 中 ， 如 果 单 击 Save 
按钮 是 先 保存 所 输入 的 字幕 ， 如 果 单 击 
Save&Continue 按钮 则 是 保存 的 同时 让 影片 继续 
播放 ， 需 注意 的 是 这 里 的 保存 只 是 将 字幕 先 存 入 
WebVTT 窗 格 。 保 存 后 ， 整 个 窗口 将 如 下 所 示 。 


不 仅 窗口 右边 出 现 字 幕 信息 ， 下 方 也 
有 WebVTT 窗 格 列 出 目前 的 WebVTT 文 件 内 
容 。 如 果 单 击 Save to File 按钮 ， 可 将 窗 格 的 
WebVTT 文件 保存 。 


Select and copy the caption file contents below and paste into a st file or save itto a fle 


rr 

另外 ， 如 果 想 对 进行 的 时 间 做 微调 ， 可 以 将 
鼠标 指针 移 至 影片 下 方 的 控制 播放 器 ， 用 拖 忠 方 
式 进 行 播放 时 间 节 点 的 微调 控制 。 


8-4-3 为 影片 加 字幕 的 实例 


程序 实例 ch8_15.html : 为 mp4 影片 trip.m4v 
加 上 字幕 。 特 别 要 注意 的 是 ， 即 使 具有 一 个 
<track> 指定 英文 字幕 (在 第 14 行 设 定 )， 也 需 
要 在 这 个 <track> 标记 内 加 上 “default”， 否 则 不 


会 


1 
这 
3 


16 
17 
18 


显示 字幕 。 

<ldoctype html> 

<html> 

<head> 
cmeta charset="utf-8"> 
<title>ch8_15.html</title> 

</head> 

<body> 

<h1> 莹 十 乌 兰 巴 托 </h1> 

<video width="569”controls> 
<source src="trip.webm” type="video/webm"> 
<source src="trip.ogy" type="video/ogv"> 
<source src="trip.may" type="video/mp4"> 
《--! 为 影片 trip.m4v 加 上 字 雁 --> 
<track src="trip,vtt" srclang="en" label="English" default> 
《p> 浏览 器 不 支持 此 影片 文件 </p> 

</video> 

</body> 

</html> 


trip.vtt : 以 下 是 trip.vtt 的 内 容 。 


WEBVTT 各 


1 

00:00.000 -> 00:06.000 
Welcome to Mongolia Prairie 
By Jiin-Kwei Hung 


00:06.500 —> 00:12.000 
Thank You for Watching this Video 


3 
00:12.050 -> 00:18.000 
The End 


下 图 所 示 是 影片 开始 播放 后 的 第 二 组 字幕 。 


第 8 章 设计 多 媒体 网 页 


蒙古 乌 兰 巴 托 


下 图 所 示 是 影片 开始 播放 后 的 第 三 组 字幕 。 
蒙古 乌 兰 巴 托 


程序 实例 ch8_16.html : 重新 设计 程序 实例 
ch8g_15.html。 这 个 实例 主要 是 设计 了 两 个 字幕 


轨 


道 ， 多 了 中 文字 幕 ， 在 欣赏 影片 时 ， 可 以 切换 


显示 中 文 或 英文 字幕 ， 笔 者 设 定 默认 是 显示 英文 
字幕 。 


WebVTT 文件 的 内 容 。 


<ldoctype html> 

<html> 

<head> 
‘<meta charset-"utf-8"> 
<title>che_16.htnl</title> 

</head> 

<body> 

<h2> 莱 二 乌 兰 巴 托 </h2> 

<video width="599" controls> 

trip,webm" type="video/webm"> 


rip nay” type-"video/mp4"> 
《<--1 为 影片 trip.mAv 加 上 英文 字幕 ， 默 认 是 显示 英文 字幕 --> 
<track src="trip,vtt” srclang="en" label="English" default> 
《<--! 为 影片 trip .md4v 加 上 中 文字 莫 
<track src="tri ”srclang="zh-tw”label=" 中 文 "> 
《p> 浏览 器 不 支持 此 影片 文 忻 </p> 

</video> 

</body> 

</html> 


triptw.vtt: 以 下 是 设 定 显示 中 文字 幕 的 


76 


HTML5+CSS3 王者 归来 


WEBVTT 


入 


00:00.000 --> 00:06.000 
蒙古 大 草原 之 旅 


法 锦 魁 


2 


00:06.500 -> 00:12.000 
感谢 大 家 欣 宽 


3 
00:12.050 -> 00:18.000 
再 则 


上 述 程序 第 14 行 的 <trasck> 标记 内 含 
default， 设 定 默 认 是 显示 英文 字幕 ， 如 果 单 击 回 
按钮 ， 可 以 列 出 选择 English 或 是 中 文 的 菜单 。 


蒙古 乌 兰 巴 托 


er. 


下 图 所 示 是 选择 切换 至 中 文 。 


站 


接着 将 显示 第 16 行 设 定 的 中 文字 幕 ， 中 文 
字幕 的 VTT 文件 名 是 triptw.vtt。 下 图 所 示 是 显示 
第 一 组 字幕 。 


蒙古 乌 兰 巴 托 


下 图 所 示 是 第 二 组 字幕 。 
蒙古 乌 兰 巴 托 


下 图 所 示 是 显示 第 三 组 字幕 。 
蒙古 乌 兰 巴 托 
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:定居 谋 入 资源 文件 <embed> 元 素 


如 果 你 是 年 轻 的 学 生 ， 不 曾经 历 因特网 的 兴衰 ， 可 能 对 Netscape i 
不 会 有 印象 。20 多 年 前 ， 这 家 公司 所 开发 的 浏览 器 主 字 全 球 因特网 ”Netscape Navigator 3.X 
市 场 ， 几 乎 所 有 人 买 了 计算 机 安装 完 操 作 系统 ， 下 一 步 就 是 安装 这 I 
家 公司 的 浏览 器 Netscape Navigator。 右 图 所 示 的 图 书 是 笔者 曾经 扎 ne 
写 的 。 

<embed> 元 素 即 使 到 了 HTML4.01 时 代 仍 不 被 W3C 认可 为 
HTML 的 元 素 。 其 实 这 个 元 素 是 Netscape 公司 开发 扩充 的 元 素 ， 
过 去 一 直 被 用 在 插件 ， 后 来 逐渐 被 其 他 浏览 器 开发 公司 认可 ， 到 了 
HITML5 时 代 ， 终 于 被 认可 并 作为 元 素 之 一 。 在 HIML5 中 也 是 将 此 
元 素 用 于 需要 插件 来 播放 的 网 页 内 容 。<embed> 元 素 的 特点 是 没有 结 
东 标 记 ， 使 用 格式 如 下 : 

<embed src=" 嵌入 对 象 的 URL"” 其 他 属性 > 

上 述 属 性 内 容 如 下 : 
日 -ae 

这 是 必要 的 属性 ， 该 属性 用 于 设 定 嵌 入 对 象 的 URL。 
口 type 

该 属性 用 于 设 定 嵌 入 对 象 的 MIME 类 型 。 
吕 width 

该 属性 用 于 嵌入 对 象 的 宽度 ， 单 位 是 px。 
DD height 

该 属性 用 于 嵌入 对 象 的 高 度 ， 单 位 是 px。 


程序 实例 ch8_17.html: 将 Flash 文 件 嵌 入 执行 程序 后 将 有 下 图 所 示 的 
HTML 文件 。 Flash 动画 效果 。 


<!doctype html> 
<htmt> 
<head> 
<meta charset="utf-8"> 
<title>ch8_17.html</title> 
</head> 
<body> 
<embed src="maxl.swf" 
type="application/x-shockwave-flash"> 不 过 要 提醒 的 是 ， 必 须要 外 挂 Adobe Flash 


0 Player 才 可 欣赏 此 动画 。 如 果 使 用 正 浏览 器 安 


12 </html> 装 完 Adobe Flash Player 之 后 仍 无 法 看 到 动画 效 
果 ， 请 执行 浏览 器 的 “管理 加 载 项 ”选项 。 


mopwWNpp 


[Eo 


HTML5+CSS3 王者 归来 


考古 十 “入 » 人 » 
请 确认 并 单 击 “ 管 理 加 载 项 ” 窗 格 的 “工具 栏 和 扩展 ”选项 。 
检视 及 管理 Internet Bxplorer 附加 元 件 
了 Hi 件 洋 型 才 称 央 和 者 状态 办 移 吉 A 时 间 入 
本 (i) Quakomm Atheros 

S: — I CESpeechBHO Class (不 洽 于 ] Quakomm Ath。 已 启用 54 位 元 

内 天 3 提 划 者 他 Microsoft Corporation 

加 nw Lync Browser Helper Microsoft Corporation 。 已 记 用 64 人 元 

OESREE Lyne Click to call Microsoft Corporation 已 启用 64 们 元 

M owiehearty Application Component 
Microsoft Windows mG) 2 元 
Sy ce 
提示 ; Symantec Vulnerability proted- Symantec Corporation 。 已 所 用 32 位 元。 (006 秒 


目前 己 吉 和 的 hn 元 件 习 | 
请 找寻 Shockwave Flash Object， 同 时 确认 其 已 启用 。 如 果 未 启用 ， 则 请 予以 启用 ， 这 样 就 可 以 
在 浏览 器 上 欣赏 Flash 动画 了 。 


| 8-6 | 谋 入 对 象 <object> 元 素 


这 是 早期 HTML 版 本 就 有 的 元 素 ， 可 以 使 用 这 个 元 素 嵌入 图 片 、 影 片 、 声 音 或 是 其 他 HTML 
文件 。 另 外 也 可 以 将 需要 插件 支持 的 图 片 、 影 片 、 声 音 等 多 媒体 文件 嵌入 网 页 内 。 


这 个 元 素 的 使 用 格式 如 下 : 
<object 各 种 属性 > … </object> 
有 关 属 性 内 容 如 下 : 

口 ”data : 设 定 要 歼 入 网 页 内 容 的 URL。 口 name : 定义 对 象 的 名 称 。 


口 


type : 设 定 要 嵌入 网 页 内 容 的 MIME 类 型 。 form : 定义 窗 体 。 

口 _height/width : 设 定 嵌入 对 象 的 高 度 /宽度 。 口 usemap : 指明 嵌入 的 影像 地 图 ， 可 参考 
7=9=1 节 。 

程序 实例 ch8_18.html : 嵌入 一 个 多 媒体 文件 


travel.wmv。 


口 


<!doctype html> 

<html> 

<head> 陆 上 交通 oe 

<meta charset="utf-8"> 著名 的 风景 点 
<title>ch8_18.html</title> 

</head> 

<body> 

<object data="travel.wmv" height="300" width="400"> 

</object> 三 

</body> DO 

</html> 


PeoomJdaupwNp 


1 
水 


Windows 操作 系统 中 有 一 个 reminderwav 
声音 文件 ， 读 者 可 以 进入 文件 管理 器 以 搜寻 
“*.wav” 关 键 词 的 方式 找到 ， 笔 者 将 此 文件 放 
置 在 ch8 文件 夹 内 做 测试 之 用 。 不 过 测试 完 笔者 
就 将 之 删除 了 ， 读 者 可 以 自己 去 寻找 。 
程序 实例 ch8_19.html : 使 用 <object> 元 素 嵌 
入 声音 文件 reminder.wav 至 网 页 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch8_19.html</title> 
</head> 
<body> 
<object data="reminder.wav"> 
</object> 
</body> 
</html> 


PEJAUUupwWNp 


>、 


®S 
(> 0 WY 


上 例 中 ， 单 击 播放 按钮 可 以 播放 reminder. 
wav 声音 文件 。 声 音 文件 没有 画面 ， 有 时 我 们 
可 能 会 想 制作 网 页 的 背景 音乐 ， 或 是 期 待 浏览 
者 进入 网 页 就 可 立即 欣赏 我 们 提供 的 音乐 ， 可 
以 将 嵌入 对 象 的 高 度 和 宽度 设 为 0， 参考 如 下 


第 8 章 设计 多 媒体 网 页 


实例 。 
程序 实例 ch8_20.html : 只 要 浏览 者 一 进入 这 
个 网 页 ， 立 即 播放 reminder.wav 声音 文件 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch8_20.html</title> 
</head> 
<body> 
<object data="reminder.wav" height="0" width="0"> 
</object> 
</body> 
</html> 


这 个 程序 执行 时 会 立即 播放 reminder.wav 声 
音 文件 ， 但 画面 是 空白 的 。 
程序 实例 ch8_21.html : 使 用 <object> 元 素 ， 
嵌入 Flash 动画 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch8_21.html</title> 
</head> 
<body> 
<object data="max2.swf"” width="400" height="300" 
type="application/x-shockwave-flash"> 
10 </object> 
11 </body> 
12 </html> 


PeowomJaoupwN. 


vawmwNnm 


加 


这 个 程序 执行 时 ， 将 显示 Flash 动画 。 


设 定 嵌入 对 象 的 参数 <param> 元 素 


在 使 用 <object> 元 素 嵌 入 外 挂 的 对 象 时 ， 这 个 元 素 为 所 藤 入 的 对 象 定 义 参数 。 在 使 用 上 ， 这 个 
元 素 一 定 是 <object> 元 素 的 子 元 素 ， 要 放 在 <object> 标记 内 的 最 前 面 。 
程序 实例 ch8_22.html : 使 用 <object> 元 素 嵌入 对 象 ， 然 后 使 用 <param> 元 素 定 义 所 嵌入 对 象 的 参 


数 ， 程 序 第 10 行 定 义 Flash 文件 的 背景 颜色 是 蓝 色 。 如 果 你 的 浏览 器 尚未 安装 Adobe Flash Player， 


则 本 程序 将 显示 第 13 行 的 内 容 。 
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HTML5+CSS3 王者 归来 


1 <ldoctype html> 执行 结果 


2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>chs_22.html</title> 

6 </head> 

7 <body> 

8 <object data="max2.swf" height="300" width="400" 
9 type="application/x-shockwave-flash"> 

10 <param name="bgcolor” value="#0000ff"> : 

me i 读者 应 可 看 到 背景 色 已 经 修改 了 。 有 关 颜 色 
12 <param name="movie” value="max2.swf"> 义 义 > i i 

13 ”<p> 欣赏 此 动画 需 安 装 Adobe Flash Player</p> 定义 的 参数 意义 相关 知识 将 在 附录 王 解说 。 

14 </object> 

15 </body> 

16 </html> 


~ 


~ 


fs 济 : 漠 建立 岁入 的 浮动 框架 <iframe> 元 素 


HTMLS5 允许 我 们 在 网 页 内 建立 内 妊 浮 动 框架 ， 以 便 在 此 框架 内 放置 其 他 HIML 文件 的 数据 。 
这 个 元 素 的 使 用 格式 如 下 : 
<iframe src="HTML 文件 的 URL" 属性 设 定 > … </iframe> 


有 关 属 性 内 容 如 下 : 
是 sre 

该 属性 设 定 要 肉 入 浮动 框架 HTML 文件 的 URL。 
口 srcdoc 


该 属性 设 定 要 显示 在 框架 中 的 HTML 文件 内 容 。 如 果 浏 览 器 支持 srcdoc 属性 ， 它 将 覆盖 src 属 
性 设 定 的 内 容 。 如 果 浏 览 器 不 支持 srcdoc 属性 ， 内 顽 浮 动 框架 将 显示 src 属性 设 定 的 HTML 文件 。 


DD _ name 


该 属性 设 定 框架 的 名 称 。 这 样 如 果 用 <a> 元 素 的 target 属性 引用 此 名 称 ， 就 可 以 执行 超 链接 。 


利用 这 个 特性 ， 可 以 进行 多 个 HTML 文件 的 超 链 接 。 
程序 实例 ch8_23.html : 这 是 <iframe> 元 素 的 基本 应 用 。 这 个 程序 会 建立 一 个 内 嵌 式 浮动 框架 ， 然 后 
将 ch8_16.html 的 网 页 内 容 嵌 入 。 如 果 用 户 的 浏览 器 不 支持 <iframe> 元 素 ， 将 列 出 第 10 行 的 内 容 。 


1 《ldoctype html> 
2 <html> 执行 结果 


3 <head> 
4 <meta charset="utf-8"> Using iframe 
5 <title>ch8 23.html</title> 

6 </head> 蒙古 乌 兰 巴 托 
7 <body> 


8 <hi>Using iframe</h1> 

9 <iframe src="ch8_16.html” width="600" height="400"> 
16 <p> 浏 览 器 不 支持 iframe 元 素 </p> 

11 </iframe> 

12 </body> 

13 </html> 
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程序 实例 ch8_24.html : 这 是 一 个 混合 应 用 的 网 页 设计 实例 ， 内 符 浮 动 框架 将 放 入 photo-Chicago. 
html 的 内 容 。 当 单 击 “ 蒙 古 ” 超 链接 时 ， 内 医 浮 动 框架 将 打开 photo-Mongolia.html 的 内 容 ， 当 单 击 
“中 国 西藏 ” 超 链接 时 ， 内 媒 浮 动 框架 将 打开 photo-Tibethtml 的 内 容 。 这 个 程序 的 关键 是 第 13 行 
的 name 属性， 笔者 将 内 藤 浮 动 框架 命名 为 “photo”， 然 后 在 第 10 行 和 11 行 笔者 使 用 target 属性 设 
定 其 超 链 接 的 HTML 文件 内 容 将 放 在 photo 内 由 浮动 框架 内 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset-"utf-8"> 

5 xtitle>ch8_24.html¢/title> 
6 </head> 

7 <body> 

3 <h1> 我 的 旅游 经 历 </h1> 


9 <ul> 


19 <li><a href="photo-Mongolia.html” Target- ="photo": > 莹 让 </a></i> 
11 <liyka href="photo-Tibet .html” target="photo"> 站 国 西 戈 </a></i> 


12 </ul> 


13 xiframe src-"photo-chicago.html" width-"seo" height-"400" name="photo"> 
14 </iframey 

15 </body> 

16 </html> 


photo-Chicago.html 
1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>photo-Chicago.html</title> 
6 </head> 
7 <body> 
8 <h1> 我 在 Chicago</h1> 
9 <img src="photo-Chicago.jpg” width="300"> 
19 </body> 
11 </html> 


photo-Mongolia.html 
1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>photo-Mongoloa.html</title> 
6 </head> 
7 <body> 
8 <h1> 蒙 古 大 草原 </h1> 


9 <img src="photo-Mongolia. jpg" width="400"> 


10 </body> 
11 </html> 


photo-Tibet.html 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>photo-Tibet.html</title> 
6 </head> 

7 <body> 

8 《<h1> 西 藏 布 达 拉 宫 </h1> 

9 <img src="photo-Tibet .jpeg™ width="400"> 
19 </body> 

11 </html> 


下 列 是 程序 刚 启动 时 的 画面。 


我 的 旅游 经 历 


。* 彭 古 
-中 国王 攻 


我 在 Chicago 


当 单 击 蒙古 超 链接 时 将 看 到 下 面 的 画面 。 
我 的 旅游 经 历 和 


， 蓝 去 
5 


蒙古 大 草原 


当 单 击 西藏 超 链接 时 将 看 到 下 面 的 画面 。 
我 的 旅游 经 历 有 


“要 上 


西藏 布 达 拉 宫 
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习题 

1. 请 为 自己 录制 一 份 求职 的 自我 介绍 履历 影片 ， 同 时 将 这 份 影片 文件 加 上 字幕 。 
2. 请 为 自己 的 科 系 建立 一 个 招生 广告 网 页 ， 内 容 请 自行 发 挥 创 意 。 

3. 请 建立 一 个 多 媒体 网 页 ， 这 个 网 页 的 内 容 是 介绍 你 的 家 乡 。 


4. 请 参考 程序 实例 ch8_24.html， 使 用 内 嵌 框 架 的 概念 ， 建 立 自己 的 旅游 经 历 网 页 ， 至 少 要 有 10 条 
数据 。 可 以 分 别 加 载 入 内 嵌 框 架 内 ， 内 容 请 自行 发 挥 创意 。 


制作 输入 表单 


本 章 摘要 


9=1 
9 2 
9=3 
9= 4 
9=5 
9=6 
9=7 
9=8 
9=9 


制作 输入 表单 <form> 元 素 

制作 表单 组 件 <input> 元 素 

建立 多 行 输入 的 文字 框 <textarea> 元 素 

为 对 象 加 上 关联 标记 <label> 元 素 

显示 进度 <progress> 元 素 

显示 仪表 值 <meter> 元 素 

下 拉 式 选单 与 列表 框 <select> 和 <option> 元 素 
制作 文字 框 的 后 补 选项 <datalist> 和 <option> 元 素 
表单 组 件 群 组 化 <fieldset> 和 <legend> 元 素 


9-10 ”加 密 密 钥 <keygen> 元 素 


笔者 所 介绍 的 前 8 章 的 HTML 内 容 ， 皆 算是 单 向 传递 数据 ， 当 使 用 者 浏览 网 页 的 时 候 ， 所 
看 到 的 是 文字 、 列 表 、 表 单 、 图 片 、 声 音 与 影片 等 。 其 实 这 些 功能 是 不 够 的 ， 一 个 网 页 更 重要 的 
是 能 够 和 使 用 者 进行 互动 交流 ， 例 如 近年 来 流行 的 网 络 搜索 、 网 络 投票 、 网 络 注册 、 网 络 购物 、 
网 络 考试 和 连 网 欣赏 各 式 影片 等 ， 笔 者 本 章 将 介绍 这 方面 应 用 的 基本 知识 ， 制 作 输入 表单 。 

本 章 内 容 中 ， 可 能 会 磁 上 |E 不 支持 的 功能 ， 此 时 笔者 会 改 用 Google Chrome 或 其 他 浏览 


器 来 执行 。 


HTML5+CSS3 王者 归来 


部 状 制作 输入 表单 <form> 元 素 


制作 表单 的 核心 元 素 是 <form>， 网 页 设计 师 接 下 来 需 将 组 成 表单 相关 结构 与 内 容 的 子 
元 素 和 属性 写 入 <form> 元 素 内 。 当 表单 数据 上 传 后 ， 服 务 器 端 有 专门 处 理 上 传 数据 的 程序 
(CGI 或 PHP)， 针 对 需求 做 处 理 。 本 章 的 重点 是 制作 输入 表单 ， 有 关 服 务 器 端的 处 理 程序 暂 
不 说 明 。 

<form> 元 素 的 使 用 格式 如 下 : 

<form action=" 表单 处 理 程序 的 URL"” method=" 数据 传送 方式 ”其 他 属性 > … </form> 


口 action 

设 定 表单 处 理 程 序 的 URL。 不 过 ， 如 果 设 计 表 单 组 件 的 <input> 元 素 (type 属性 是 submit 或 
image) 或 <button> 元 素 内 有 form action 属性 〈 这 个 属性 有 特别 的 表单 处 理 程序 )， 则 form action 属 
性 优先 使 用 。 
口 _method 


设 定 表单 数据 用 哪 一 种 方式 传 给 服务 器 端的 程序 。 有 两 种 选项 : 

get : 这 是 默认 选项 ， 表 单数 据 会 以 name/value 方式 附加 到 URL 的 变量 中 。 这 种 方式 简单 ， 基 
于 安全 考虑 时 请 勿 使 用 这 个 选项 传送 信息 。 

post : 表单 数据 会 以 封包 (package) 方式 传送 到 服务 器 端的 HTTP 文件 头 区 块 内 。 由 于 以 封包 
方式 传送 ， 所 以 传送 数据 没有 大 小 限制 。 
口 name 


设 定 表单 的 名 称 。 一 个 HTML 文件 不 可 以 有 重复 的 表单 名 称 ， 这 样 服务 器 端的 表单 处 理 程序 才 
可 针对 这 个 表单 执行 更 进一步 的 工作 。 


口 accept-charset 


一 般 通 过 表单 传送 数据 时 ， 它 的 文字 编码 应 该 和 网 页 的 文字 编码 相同 。 如 果 想 要 用 不 同 的 文字 
编码 方式 可 以 使 用 accept-charset 属性 来 设 定 。 假 如 有 多 种 文字 编码 方式 ， 可 以 彼此 间 空 一 格 ， 这 时 
书写 顺序 代表 使 用 的 优先 顺序 。 


DO autocomplete 


可 以 由 此 属性 设 定 输入 字段 是 否 具有 自动 填 入 的 功能 。 所 谓 自动 填 入 是 指 浏览 器 会 记 住 之 前 的 
输入 ， 下 次 链接 到 相同 网 站 ， 会 自动 填 入 先前 输入 的 数据 。 这 方面 的 默认 功能 由 浏览 器 决定 ， 一 般 
浏览 器 会 询问 是 否 储存 信息 。 它 有 两 个 选项 : 

on : 会 自动 输入 。 

off : 不 使 用 自动 输入 功能 。 

不 过 ， 如 果 设 计 表 单 组 件 的 <input> 元 素 (type 属性 是 text) 有 autocomplete 属性 ， 这 个 属性 的 
设 定 将 优先 使 用 。 
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口 enctype 

可 以 设 定 表单 数据 传送 到 服务 器 的 编码 方式 ， 有 下 列 3 个 选项 : 

application/x-www-form-urlencoded : 这 是 默认 选项 。 

multipart-form-data : 在 传送 的 表单 有 附加 文件 时 使 用 。 

text/plain : 在 传送 纯 文本 的 表单 中 使 用 。 

不 过 ， 如 果 设 计 表单 组 件 的 <input> 元 素 (type 属性 是 submit 或 image) 有 formenctype 属性 ， 
这 个 formenctype 属性 的 设 定 将 优先 使 用 。 
DO novalidate 

这 个 属性 用 于 设 定 在 进行 表单 传送 时 ， 不 对 所 输入 的 数据 做 验证 。 

其 实在 HTML5 中 ， 若 <input> 元 素 的 type 属性 是 url 或 email 时 ， 会 自动 检查 输入 的 数据 是 否 
正确 ， 如 果 设 定 novalidate 属性 ， 则 改 成 不 做 数据 验证 。 
口 target 

可 设 定 显示 数据 传送 结果 的 浏览 脉络 。 这 个 属性 的 意义 与 <a> 元 素 的 target 属性 用 法 相同 ， 读 
者 可 参考 4-2 节 。 


制作 表单 组 件 <input> 元 素 


<input> 元 素 用 于 制作 表单 组 件 ， 使 用 时 需 放 在 <form> 元 素 内 。 此 外 ， 使 用 <input> 元 素 时 ， 
可 以 利用 type 属性 建立 不 同 的 表单 按钮 ， 笔 者 将 一 一 以 实例 做 说 明 。 


口 accept 
设 定 服务 器 可 以 接收 文件 的 MIME 类 型 ， 如 果 要 指定 多 个 MIME 类 型 时 ， 可 以 用 “,” 隔 开 。 
oo alt 


如 果 无 法 输出 图 片 内 容 ， 可 以 将 此 属性 所 指定 的 内 容 输出 ， 具 体 用 法 可 参考 7-1 节 与 程序 实例 
ch7 2.html。 


口 autocomplete 


可 以 通过 此 属性 设 定 输入 字段 是 否 具 有 自动 填 入 的 功能 。 所 谓 自动 填 入 是 指 浏览 器 会 记 住 之 前 
的 输入 ， 下 次 链接 到 相同 网 站 ， 会 自动 填 入 先前 输入 的 数据 。 这 方面 的 默认 功能 由 浏览 器 决定 ， 一 
般 浏 览 器 会 询问 是 否 储存 此 信息 。 它 有 两 个 选项 : 

on : 会 自动 输入 。 

off : 不 使 用 自动 输入 功能 。 

口 autofocus 
网 页 显示 时 ， 输 入 字段 的 插入 点 将 位 于 此 属性 设 定 的 字段 上 ， 也 可 称 焦点 (focus) 在 此 字段 ; 


如 果 设 定 的 是 按钮 ， 则 该 按钮 将 自动 被 选取 ， 此 时 按 Enter 键 ， 相 当 于 单 击 这 个 按钮 。 在 网 页 页 面 
中 按 Tab 键 可 以 切换 此 焦点 ， 一 个 页 面 只 能 有 一 个 表单 组 件 有 此 设 定 。 
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口 


| 


checked 

车 设 定 这 个 属性 核对 框 (checkbox) 将 呈 被 选取 状态 。 

dirname 

这 个 属性 用 于 设 定 文字 走向 信息 ， 只 用 在 <input> 和 <textarea> 元 素 中 ， 在 传送 数据 到 服务 器 端 


， 一 定 要 加 上 “.dir”。 例如 : 


<form action="get .exe" First Name: <input type="text" name="filename" 


dirname="filename.dir"> 


disabled 

设 定 停 用 某 个 字段 ， 这 样 此 字段 就 无 法 用 来 输入 和 单 击 。 

form 

这 个 属性 可 以 令 表单 的 字段 和 指定 的 <form> 元 素 产 生 链 接 。 

formaction 

和 前 一 节 介绍 的 action 属性 相同 ， 这 个 属性 可 以 设 定 表单 数据 处 理 程序 的 URL。formaction 属 


性 相 较 于 <form> 元 素 内 的 action 有 优先 使 用 权 。 


口 


口 


formenctype 

可 以 设 定 表单 数据 组 件 传送 到 服务 器 的 编码 方式 ， 有 下 列 3 种 选项 : 
application/x-www-form-urlencoded : 这 是 默认 选项 。 
multipart-form-data : 在 传送 的 表单 有 附加 文件 时 使 用 。 

text/plain : 在 传送 纯 文本 的 表单 中 使 用 。 

这 个 formenctype 属性 相 较 于 <form> 元 素 内 的 enctype 有 优先 使 用 权 。 
formmethod 


和 前 一 节 所 介绍 的 method 属性 相同 ， 这 个 属性 可 以 设 定 表单 数据 用 那 一 种 方式 传送 。 


formmethod 属性 相 较 于 <form> 元 素 内 的 method 有 优先 使 用 权 。 


口 


formnovalidate 
可 设 定 是 否 对 所 传送 的 数据 做 验证 。formnovalidate 属性 相 较 于 <form> 元 素 内 的 novalidate 有 


优先 使 用 权 。 


可 | 


formtarget 
可 设 定 显示 数据 传送 结果 的 浏览 脉络 ， 其 意义 与 <a> 元 素 的 target 属性 用 法 相同 ， 读 者 可 参考 


4-2 节 。formtarget 属性 相 较 于 <form> 元 素 内 的 target 有 优先 使 用 权 。 


可 | 


日 


i 


height 和 width 

可 设 定 图 片 的 高 度 和 宽度 。 

list 

定义 候补 选项 ， 可 将 候补 选项 定义 在 <datalist> 元 素 内 ， 参 考 9-8 节 。 


可 
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maxlength 
设 定 在 某 字 段 内 可 以 输入 的 最 多 字符 数 。 例 如 ， 在 建立 输入 电话 号 码 表单 时 ， 大 陆 的 手机 号 码 


是 11 位 ， 可 以 设 定 此 属性 值 为 11， 台 湾 的 手机 号 码 是 10 位 ， 可 以 设 定 此 属性 值 为 10。 


OD multiple 
设 定 可 以 输入 两 个 以 上 的 值 。 
口 _name 
设 定 表单 的 域名 。 
口 _ pattern 
这 个 属性 适用 于 <input> 元 素 的 type 类 型 是 email、text、tel、search、url 和 password 时 ， 用 来 
验证 字段 输入 值 的 格式 是 否 符合 规定 。 
OD placeholder 
设 定 在 某 字 段 输入 信息 时 提醒 使 用 者 的 内 容 。 例 如 : 
<input type="text" name="fullname" placeholder=" 洪 锦 魁 "> 
上 例 是 提醒 使 用 者 该 字段 应 该 输入 姓名 的 全 名 。 
口 readonly 
将 某 字段 设 为 只 能 阅读 ， 无 法 更 改 或 编辑 。 
口 _ required 
设 定 某 字 段 是 必 填 的 ， 如 果 没 有 输入 就 无 法 传送 。 
口 size 


这 个 属性 应 是 整数 值 ， 用 于 设 定 字段 的 宽度 ， 所 设 定 的 长 度 代表 字段 可 接受 的 字数 。 如 果 用 在 


下 拉 式 菜单 ， 则 是 只 可 看 到 的 选项 数目 。 


口 


口 


化 。 


Sie 
本 设 定 图 片 文件 的 URL。 
step 


可 设 定 输入 值 是 按 哪 种 方式 做 变化 。 如 果 step=5， 那 么 数字 应 该 以 0、5、10、15 的 方式 变 
step 属性 可 以 和 max 与 min 搭配 使 用 ， 这 样 就 可 以 建立 值 的 范围 ， 如 果 省 略 min， 预 设 min 


引 | 


引 


的 值 是 0。 


这 个 属性 适用 于 input 元 素 的 type 类 型 是 number、range、time、month、date、week、datetime 


或 datetime-local 时 。step 属性 使 用 在 不 同 type 类 型 下 的 默认 值 如 下 表 所 示 。 


step 属性 用 于 不 同 type 类 型 下 的 默认 值 


type 属性 默认 的 step 值 
number 二 1 
range 1 1 
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续 表 
默认 的 step 信 


tme 
datetime 


60 


60 
和 
1 
1 


month 


口 max/min 属性 

max 属性 可 设 定 字段 输入 数据 的 最 大 值 ，min 属性 可 设 定 字段 输入 数据 的 最 小 值 。 
口 value 

可 设 定 按钮 默认 文字 ， 或 是 字段 的 默认 值 或 文字 。 


9-2-1 制作 提交 按钮 submit 属性 值 
这 个 属性 值 可 以 制作 提交 按钮 ， 使 用 格式 如 下 : 


<input type="submit"” 其 他 属性 > 


OD value 

可 用 于 设 定 按钮 名 称 。 如 果 没 有 这 个 属性 ， 浏 览 器 会 将 名 称 默认 为 “送出 查询 ”。 不 同 的 浏览 器 
可 能 有 不 同 的 默认 名 称 ， 例 如 “提交 ”。 
口 ” 其 他 可 设 定 属性 

其 他 可 设 定 的 属性 有 autofocus、disabled、form、formaction、formmethod、formnovalidate、 
formtarget 和 name。 
程序 实例 ch9_1.html : 制作 送出 按钮 ， 程 序 第 11 行 设 定 按钮 使 用 默认 的 名 称 ， 程 序 第 14 行将 按钮 
名 称 设 为 “测试 送出 ”。 


1 <ldoctype html> 
2 <html> 执行 结果 


3 <head> 


4 <meta charset="utf-8"> 

区 <title>ch9 1.html</title> 数据 查询 
6 </head> 

7 <body> 按钮 使 用 默认 名 称 
8 <form action="cgi-bin/get.exe” method="get"> 


9 ”<h1> 数 据 查 询 </h1> 


19 ”<p> 按钮 合用 默认 名 称 </p> 自行 设 定 按 钥 名 称 为 测试 送出 

11 <input type="submit"> [al 

pe [he messese) 

13 <p> 自 行 设 定 按钮 名 称 为 测试 送出 </p> 

14 <input type="submit”value=" 测 试 送出 "> el |» 
A EE 上 例 中 ， 车 是 单 击 “ 送 出 查询 ”按钮 将 看 到 
16 </form> 示 画 面 。 

ns 下 图 所 示 画 面 


18 </html> 
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a 这 个 程序 只 是 显示 出 按钮 ， 由 于 服务 器 端 尚 
无 法 显示 此 网 页 未 有 get.ext 执行 读 取 按 钮 输入 ， 所 以 会 看 到 上 
@ ”请 确定 网 址 是正 礁 的 面 的 画面 。 


9-2-2 制作 重 设 按钮 reset 属性 值 


口 


这 个 属性 值 可 以 制作 重 设 按钮 ， 主 要 意义 是 取消 输入 ， 重 新 填写 。 这 个 属性 值 的 使 用 格式 如 下 : 
<input type="reset"” 其 他 属性 > 


value 
可 用 于 设 定 按钮 名 称 。 如 果 没 有 这 个 属性 ， 浏 览 器 会 将 名 称 默认 为 “ 重 设 ”。 不 同 的 浏览 器 可 能 


有 不 同 的 默认 名 称 ， 例 如 “取消 ”。 
口 ” 其 他 可 设 定 属性 


其 他 可 设 定 的 属性 有 autofocus、disabled、form 和 name。 


程序 实例 ch9_2.html : 制作 重 设 按钮 。 程 序 第 11 行 设 定 按钮 使 用 默认 的 名 称 ， 程 序 第 14 行将 按钮 
名 称 设 为 “取消 输入 ”。 
1 <ldoctype html> 执行 结果 


2 <html> 


3 <head> 


4 
此 


<meta charset="utf-8"> 
<titleych9_2.htmlc/titley 建立 重 设 按 钮 


6 </head> 
7 <body> 技 钮 使 用 软 认 名 称 


8 <form action="cgi-bin/get.exe” method="get"> 


号 
10 
11 
12 
13 


<h1> 建 立 重 设 按钮 </h1> 于 
《p> 按钮 使 用 默认 名 称 </p> 自行 说 定 按钮 名 称 为 取消 输入 
<input type="reset"> 
<p> 
《p> 自行 设 定 按钮 名 称 为 取消 输入 </p> 
<input type="reset”value=" 取 消 输入 "> 
</p> 


取消 输入 


16 </form> 
17 </body> 
18 </html> 


9-2-3 ”制作 单行 输入 的 文本 框 text 属性 值 


这 个 属性 值 可 用 于 制作 单行 输入 的 文本 框 ， 它 的 使 用 格式 如 下 : 


<input type="text"” 其 他 属性 > 


value 

可 以 使 用 此 属性 设 定 默 认 文字 。 

其 他 可 设 定 属性 

其 他 可 设 定 的 属性 有 autocomplete、autofocus、dirname、disabled、form、list、maxlength、 


name、 pattern、placeholder、readonly、required 和 size。 
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程序 实例 ch9_3.html : 要 求 输入 姓名 和 地 址 数据 ， 其 中 姓名 数据 字段 设置 宽度 是 可 以 输入 5 个 汉 
字 ， 地 址 字段 则 采用 默认 的 宽度 。 


<html> 和 人行 疆 
和 执行 结果 


<meta charset="utf-8"> 
<titleych9 3.html</title> 


¢/head> 请 输入 会 员 数 据 


<body> ek 
0 i | 
<p> 姓 名 ;<input type="text" nane="user” size="5">< 地 趟 :| 台北 市 十 林 区 | | 
i [有 
<input type="reset”value=" 取 消 "></p> 
如 果 单 击 “ 取 消 ”按钮 ， 可 以 清除 姓名 和 地 
址 字段 中 的 数据 。 
请 输入 会 员 数 据 
姓名 : 
地 址 : 
ETUE 


9-2-4， 制作 可 输入 密码 的 文本 框 password 属性 值 


这 个 属性 值 可 以 制作 以 密码 的 方式 输入 信息 的 文本 框 ， 密 码 输入 的 特点 是 所 输入 的 字符 以 
“。” 显 示 ， 同 时 字段 右边 会 有 “符号 ， 它 的 使 用 格式 如 下 : 


<input type="password" 其 他 属性 > 


口 ” 其 他 可 设 定 属性 

其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、maxlength、name、 
pattern、placeholder、readonly、required 和 size。 
程序 实例 ch9_4.html : 这 个 程序 基本 是 要 求 使 用 者 输入 账号 和 密码 信息 。 在 程序 的 第 11 行 有 
required 属性 ， 其 作用 是 如 果 没 有 输入 密码 就 单 击 “ 确 认 ” 按 钮 ， 会 出 现 提示 信息 告知 密码 是 必需 填 
写 的 。 


1 <ldoctype html> 
2 <htnls 执行 结果 


3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch9 4.html</title> ~ 

和 欢迎 进入 DeepStone 系 统 

7 <body> KETT 一 一 

8 <form action="cgi-bin/get .exe” method="get"> 

9 ”<h1> 欢 迎 进入 Deepstone 系 统 </h1> 密码 | 

19 <p> 账 号 :<input type="text” name="user” autofocus></p> 

11 <py 密 码 :cinput type-"password”name="pwd” required></p> EYE 

12 <p>kinput type="submit”value=" 确 认 "> 

13 <input type="reset”value=" 取 消 "></p> 

14 </form> 由 于 程序 的 第 10 行 增加 了 autofocus 属 

15 </body> 

16 </html> 性 ， 所 以 网 页 加 载 后 ， 插 入 点 会 在 账号 字段 出 
现 。 下 图 所 示 是 输入 数据 时 密码 字段 以 “。” 
显示 的 画面 。 
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如 果 未 输入 密码 直接 单 击 “确认 ”按钮 ， 将 


Rep ohes 约 看 到 下 图 所 示 的 提示 信息 。 
账号 :deepstone 
ee 欢迎 进入 DeepStone 系 统 
确认 。 取 浅 rm | 
ea[ 一 一 
草 请 十 写 此 字段 


9-2-5 制作 搜索 框 search 属性 值 


这 个 属性 值 可 以 用 于 制作 输入 搜寻 内 容 的 文本 框 ， 它 的 使 用 格式 如 下 : 
<input type="search" 其 他 属性 > 


口 ” 其 他 可 设 定 属性 

其 他 可 设 定 的 属性 有 autocomplete、autofocus、dirname、disabled、form、list、maxlength、 
name、 pattern、placeholder、readonly、required、size 和 value。 
程序 实例 ch9_5.html : 这 个 程序 要 求 使 用 者 输入 欲 查询 的 关键 词 。 程 序 第 11 行 在 placeholder 属性 
设 定 了 “请 输入 关键 词 ” 所 以 程序 执行 时 ， 在 输入 栏 可 以 看 到 此 字符 串 信息 。 另 外 ， 这 个 字段 也 加 
上 autofocus 属性 ， 所 以 程序 执行 时 插入 点 将 在 此 字段 。 


ne :2 时 下 列 程序 笔者 用 Chrome 执行 。 
3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch9_ 5.html</title> 欢迎 进入 DeepStone 搜 索 系统 

6 </head> 

7 <body> | RR |] 

8 <form action="cgi-bin/get.exe” method="get"> 

9 ”<h1> 欢 迎 进入 Deepstone 搜 索 系统 </h1> Ez 


19 <p><input type="search”name="searching” 

11 autofocus placeholder=" 请 输入 关键 词 "></p> 
12 <p><input type="button”value=" 搜 索 "></p> 

13 </form> 

14 </body> 

15 </html> 


9-2-6 ”制作 图 片 按 钮 image 属性 值 
这 个 属性 值 可 用 于 制作 图 片 按钮 ， 它 的 使 用 格式 如 下 : 


<input type="image" src=" 图 片 的 URL"” alt=" 文 字 ”其 他 属性 > 


口 src 
这 个 属性 用 于 设 定 图 片 的 URL。 
口 alt 


如 果 图 片 不 存在 ， 可 使 用 此 属性 设 定 代替 图 片 的 文字 。 
口 ” 其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autofocus、disabled、form、formaction、formenctype、formmethod、 


formnovalidate、formtarget、height、name、size、value 和 width。 
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程序 实例 ch9_6.html : 在 ch9 文件 夹 内 有 mybutton.jpg 按钮 图 片 文件 ， 这 个 程序 是 重新 设计 ch9_5. 
html， 但 使 用 mybutton.jpg 图 片 文件 制作 按钮 。 
1 <ldoctype html> 下 图 所 示 为 笔者 用 Chrome 


2 <html> 

3 <head> 村 

4 <meta charset="utf-8"> 执行 程序 的 结果 。 
5 <title>ch9 6.html</title> 
6 
7 
8 


人 欢迎 进入 DeepStone 搜 索 系 统 


<form action="cgi-bin/get .exe” method="get"> 


9 <h1> 欢 迎 进入 DeepStone 搜 索 系统 </h1> 情 输 入 关键 再 
19 <p><input type="search" name="searching" 
11 autofocus placeholder=" 请 输入 关键 词 "></p> 


12 <p><input src="mybutton, jpg” type="image”alt=" 搜 索 "></p> 
13 </form> 


14 </body> 
15 </html> 


mybutton.jpg 内 容 如 下 : | 上 ] 


9-2-7 ”制作 输入 电话 号 码 的 文本 框 tel 属性 值 
这 个 属性 值 可 以 用 于 制作 输入 电话 号 码 的 文本 框 ， 它 的 使 用 格式 如 下 : 


<input type="tel" 其 他 属性 > 
口 ” 其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、maxlength、name、pattern、 


placeholder、readonly、required、size 和 value。 


9-2-8 ”制作 输入 电子 邮件 字段 的 文本 框 email 属性 值 
这 个 属性 值 可 用 于 制作 输入 电子 邮件 的 文本 框 ， 它 的 使 用 格式 如 下 : 


<input type="email” 其 他 属性 > 
如 果 希 望 设 定 多 个 邮件 账号 ， 需 增加 multiple 属性 ， 然 后 各 邮件 以 逗号 “,” 隔 开 。 
口 ” 其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、maxlength、multiple、 


name、 pattern、placeholder、readonly、required、size 和 value。 


9-2-9 ”制作 输入 URL 的 文本 框 url 属性 值 
这 个 属性 值 可 用 于 制作 输入 URI 的 文本 框 ， 它 的 使 用 格式 如 下 : 


<input type="url™" 其 他 属性 > 
口 ”其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、maxlength、name、 


pattern、placeholder、readonly、required、size 和 value。 
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程序 实例 ch9_7.html : 这 是 tel、email 和 url 3 个 属性 值 的 应 用 ， 在 这 个 程序 中 用 户 需 输入 3 种 数 
据 ， 分 别 是 电话 号 码 、 电 子 邮件 地 址 和 网 址 。 其 中 电话 号 码 和 电子 邮件 字段 有 示范 输出 ， 网 址 信息 


则 是 程序 先 默认 输入 http://， 其 余 由 用 户 补充 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch9 7,html</title> 

6 </head> 

7 <body> 

8 <form action="cgi-bin/get .exe” method="get”"> 
9 ”<h1> 欢 迎 进 入 DeepStone 民 调 系 统 </h1> 


19 ”<p> 请 留 个 人 资料 </p> 
11 《p> 电话 号 码 :<input type="tel” name="phone”™ 
12 autofocus placeholder="0928833911"></p> 


13 <p> 邮 件 地 址 :<input type="email” name="e_mail” 

14 placeholder="deep@me.com" pattern></p> 

15 <p> 请 输入 最 常 浏览 网 址 </p> 

16 <p>URL 网 址 :<input type="url” name="myurl” value="http://"></p> 
17 <p><input type="submit”value=" 确 认 "> 

18 <input type="reset”value=" 取 消 "></p> 

19 «</form> 

20 </body> 

21 </html> 


下 图 所 示 为 笔者 用 Chrome 执 
行程 序 的 结果 ， 因 为 程序 的 部 分 功能 IE 不 
支持 。 


9-2-10 制作 单 选 按钮 radio 属性 值 


欢迎 进入 DeepStone 民 调 系统 
请 稍 个 人 资料 

电 请 的 nz00357 一] 

邮件 地址 eepamacm 

请 输入 最 常 浏览 网 址 

RE 网址 j 有 了 

[mW | 


程序 第 14 行 设 定 pattern 属性 ， 作 
用 是 如 果 电 子 邮件 格式 错 还 单 击 “ 确 


认 ” 按 钮 ,将 看 到 下 图 所 示 式 错误 信息 。 
| 
欢迎 进入 DeepStone 民 调 系 统 
请 留 个 人 资料 
电话 号 码 :0926833911 


浏览 网 ! 贺 Please indude an'@'inthe 
emailaddress test is missing 

OURL 网 直 :htp: an '@. 

[A 


这 个 属性 值 用 于 制作 单 选 按钮 ， 单 选 按钮 的 特色 是 一 系列 按钮 中 只 有 一 个 被 选取 。 它 的 使 用 格 


式 如 下 : 

<input type="radio"” name=" 名 称 "value=" 值 ”其 他 属性 > 
口 _name 

相同 单 选 组 的 选单 应 该 要 有 相同 的 名 称 ， 此 属性 用 于 设 定名 称 。 
OD value 

此 属性 用 于 为 单 选 按钮 设 定 一 个 值 ， 这 个 值 将 被 送 回 服务 器 。 
DD checked 

如 果 有 这 个 属性 ， 相 当 于 所 设 定 的 按钮 被 选取 。 
口 ” 其 他 可 设 定 属性 


其 他 可 设 定 的 属性 有 autofocus、disabled、form 和 required。 
程序 实例 ch9_8.html : 这 个 程序 有 性 别 单 选 按 钮 和 年 龄 分 析 数 据 单 选 按钮 。 其 中 在 年 龄 分 析 数 据 选 
单 组 ， 程 序 的 第 19 行 笔者 设 定 了 checked 属性 ， 所 以 程序 一 执行 即 可 看 到 “小 于 20 岁 ” 单 选 按钮 
被 选取 。 性 别 单 选 组 则 不 做 设 定 ， 主 要 是 用 来 给 读者 做 比较 。 


和 


HTML5+CSS3 王者 归来 


16 
11 
12 
13 


<ldoctype html> 
<html> 
<head> 
‘<meta charset="utf-8"> 
<title>ch9 8.html</title> 
</head> 
《body> 
*form action="cgi-bin/get .exe”method-"get"y 
<h1> 欢 迎 进入 DeepStone 民 亩 系统 </hi> 
<p> 请 窗 个 人 资料 c/p> 
《p> 姓名 :<input type="text” name="user” autofocus></p> 
《1-- 建立 年 性 别 分 析 数 据 --> 
<p> 性 别 :<br> 
<input type="radio” name="sex”value="1"> 男 性 <br> 
<input type="radio” name="sex”value="@") 女 性 
</p> 
《1-- 建立 年 龄 层 分 析 数 据 --> 
<《p> 年 龄 分 析 资 料 :<br> 
<input type-"radio”name-"age” value-"29”checked> 小 于 29 岁 <br> 
«input type="radio” name="age” value-"49">20-49 岁 <br> 
«input type-"radio” name-"age” value-"69">41-69 岁 <br> 
<input type-"radio” name-"age” value-"79"> 大 于 58 岁 <br> 


23 p> 
24 </form> 
25 </body> 
26 </html> 


下 图 所 示 为 笔者 用 Chrome 执行 
程序 的 结果 。 


欢迎 进入 DeepStone 民 调 系 统 
四 人 训 村 


[5 


年 的 分 析 换 科 : 

本 小 于 20 岁 

四 20-40 乡 
-60 
FT60y 


9-2-11 制作 复 选 框 checkbox 属性 值 
这 个 属性 值 用 于 制作 复 选 框 ， 复 选 框 的 特色 是 一 系列 方块 中 可 以 有 多 个 被 选取 。 它 的 使 用 格式 如 下 : 


<input type="checkbox" name=" 名 称 ”value=" 值 ”其 他 属性 > 


口 


口 


口 


口 


1 
2 
3 
4 
5 
5 
7 
8 


24 
25 
26 


name 


相同 复 选 框 群 组 的 选单 应 该 要 有 相同 的 名 称 ， 此 属性 用 于 设 定名 称 。 


value 


此 属性 用 于 为 复 选 框 设 定 一 个 值 ， 这 个 值 将 被 送 回 服务 器 。 


checked 


如 果 有 这 个 属性 ， 相 当 于 所 设 定 的 复 选 框 被 选取 。 


其 他 可 设 定 属性 


其 他 可 设 定 的 属性 有 autofocus、disabled、form 和 required。 
程序 实例 ch9_9.html : 这 个 程序 的 重点 是 程序 的 第 18 行 至 23 行 ， 在 这 里 有 一 个 名 称 是 software 
的 复 选 框 组 ， 用 户 可 以 由 此 执行 多 项 复 选 框 的 选取 操作 。 同 一 组 复 选 框 必须 有 相同 的 名 称 ， 此 例 


是 software。 


<ldoctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
titleychg_9.htmlc/titley 

</head> 

<body> 

<form action="cgi-bin/get.exe” method="get"> 
<hly 了 欢迎 进入 Deepstone 软 件 实力 调查 系统 </hay 
<p> 请 密 个 人 资料 c/p> 
《p> 姓名 ;<input type="text” name="user” autofocus></p> 

<1-- 建立 年 性 别 分 析 数据 --> 
<p> 性 别 :<br> 
<input type="radio" name-"sex” value-"1”checked> 田 性 <br> 
<input type-"radio” name-"sex”value-"@"> 女 性 <br> 
</p> 

<1-- 建立 计算 机 软件 能 力 分 析 数 据 --> 
<p> 吉 件 蓄 力 分 析 数 据 :<br> 
<input type="checkbox" name="software” value="HTML">HTML<br> 
<input type="checkbox” oftware” value="CSS">CSS¢br> 
<input type="checkbox” software” value="Javascript”>JavaScript<br> 
<input type="checkbox” name="software” value="JQuery">JQuery<br> 
/p> 

</form> 

</body> 

</html> 


欢迎 进入 DeepStone 软 件 实 力 调查 系统 


请 留 个 人 资料 


日 女性 
软件 能 力 分 析 数 据 : 
牟 
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9-2-12 制作 数值 输入 框 number 属性 值 


这 个 属性 值 用 于 制作 数值 输入 ， 它 的 使 用 格式 如 下 : 


<input type="number"” 其 他 属性 > 
口 value 

可 以 设 定 默 认 数值 。 
口 “其 他 可 设 定 属性 


其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、max、min、name、placeholder、 


readonly、required 和 step。 


程序 实例 ch9_10.html : 这 个 程序 会 要 求 用 户 输入 年 龄 ， 输 入 完成 后 ， 将 鼠标 指针 移 至 年 龄 字段 右 
边 ， 通 过 单 击 会 :按钮 可 增 减 年 龄 数字 。 这 个 程序 设 定年 龄 数字 的 最 小 值 是 1 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

所 <title>ch9 10.html</title> 

6 </head> 

7 <body> 

8 xform action="cgi-bin/get.exe” method="get"> 

9 ”《h1> 欢 迎 进入 DeepStone 外 庄 能 力 调查 系统 </h1> 
10 。 《py> 请 留 个 人 资料 </p> 
11 《py 姓名 ;kinput type="text" name="user” autofocus></p> 
12 《1- - 建立 年 年 龄 分 析 数据 --> 
13 <《p> 年 龄 :cbr> 

14 。 xinput type="number” name="num” min="1"> 

15 </p> 

16 <!-- 建立 外 语 能 力 分 析 数据 --> 

17 《<p> 外语 能 力 分 析 芭 料 :<br> 

18 tinput type="checkbox" name-"language” value-"Ja"> 日 语 cbr> 
19 <input type="checkbox” name="language”value="En"> 英 语 cbr> 
20 <input type="checkbox” name="language”value="Fr"》 法 语 cbr> 


21 cinput type="checkbox” name="language”value="De"> 礼 语 cbr> 
22 p> 
23 </form> 
24 </body> 
25 </html> 


欢迎 进入 DeepStone 外 语 能 力 调查 系统 
请 留 个 人 资料 
姓名 :开锅 择 


年 内 
Ps 


外 语 能 力 分 析 资 料 : 
上 日 


痪 
目 法 语 


日 德语 


9-2-13 ”制作 指定 范围 的 数值 输入 框 range 属性 值 
这 个 属性 值 用 于 制作 指定 范围 的 数值 输入 框 ， 它 的 使 用 格式 如 下 : 


<input type="range" 其 他 属性 > 


口 value 


可 用 于 设 定 默认 数值 ， 如 果 不 指定 则 取 中 间 数 “50”。 


max/min 


如 果 不 指定 数值 ， 则 默认 max 是 100，min 是 0。 


口 ” 其 他 可 设 定 属性 


其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、name、placeholder 和 


step。 


程序 实例 ch9_11.html : 这 是 满意 度 调查 程序 ， 用 户 可 用 拖 遇 数字 滑 块 的 方式 调整 满意 度 。 这 个 程 
序 的 最 高 满意 度 是 10 (程序 第 12 行 设 定 )， 最 低 是 0〈 使 用 预 设 )。 
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1 <ldoctype htmly /二 
2 da 执行 结果 

3 <head> 

4 <meta charset-"utf-8"> 

5 <titleyxch9 11.html</title> 欢迎 进 入 DeepStone 满 意 度 调 查 系统 
6 </head> 

7 <body> 请 留 个 人 泵 村 

8 <form action="cgi-bin/get.exe” method="get"> E73 | 

9 《h1> 欢 迎 进入 Deepstone 满 意 度 调查 系统 </h1> 

19 “py 请 窗 个 人 资料 c/p> 渍 总 度 机 在: 起 


2 <p> 姓 名 :<input type="text" name="user” autofocus></p> 

12 《py> 满 意 度 调 查 :<input type="range”name="Grade”max="16"></py> 
13 </form> 

14 </body> 

15 </html> 


9-2-14 指定 颜色 color 属性 值 


这 个 属性 在 执行 时 会 跳出 色彩 框 ， 用 户 可 以 选择 特定 色彩 。 有 关 色 彩 的 相关 知识 可 参考 附录 
E。color 的 使 用 格式 如 下 : 
<input type="color" 其 他 属性 > 


口 ” 其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、name 和 value。 
程序 实例 ch9_12.html : 色彩 选择 的 应 用 。 这 个 程序 执行 时 会 出 现 两 个 色彩 ， 第 1 个 是 使 用 预 设 颜 
色 ， 第 二 个 是 设 定 的 蓝 色 。 不 论 单 击 哪 一 个 色彩 框 均 会 出 现 色彩 对 话 框 ， 可 以 在 此 更 改色 彩 。 
2 <ldoctype htnl> 只 要 鼠标 单 击 色 彩 框 即 可 出 现 色彩 对 话 


2 <html> 

3 <head> y 

4 <meta charset-"utf-8"> 框 ， 供 用 户 选择 新 色彩 。 
<titleych9_12.html</titley 色彩 [x | 

6 </head> 

7 «body> 

8 <form action="cgi-bin/get ,exe” method-"get"》 

9 《p> 色彩 选 择 1:<input type="color" name="color1"></p> 

19 。 “py 色彩 途 择 2:<input type="color” name="color2” value="#9@eeff"></p> 

11 «</form> 

12 </body> 

13 </html> 


4 


名 并 (BD |160 (RO 
(sy [0 | (Gy 0 
SIS(O) wg: [0 | BU:O 


E33 太 于 增 自 打 色 25(A) | 


行 结 
执行 结果 色 沁 迁 托 1 [| 
色彩 选 抒 2: 到 | 


9-2-15 ”制作 不 显示 但 要 传送 的 信息 hidden 属性 值 


有 具有 这 个 属性 的 数据 不 会 在 网 页 上 显示 ， 但 是 会 传送 到 服务 器 端 。 例 如 ， 大 型 购物 网 站 可 以 为 
底下 的 网 络 商店 给 予 编号 ， 然 后 做 市 场 调 查 ， 了 解 这 家 网 络 商 店 的 服务 满意 度 。 消 费 者 看 不 到 网 络 
商店 的 编号 ， 但 是 消费 者 做 问卷 响应 时 ， 服 务 器 端 可 以 知道 这 是 那 一 家 商店 的 调查 结果 。 这 个 属性 
的 使 用 格式 如 下 : 


<input type="hidden" value=" 编号 ”其 他 属性 > 
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口 value 


这 个 值 不 会 在 网 页 中 显示 ， 但 是 会 传 回 服务 器 。 在 做 市 场 调 查 的 应 用 中 ， 这 个 值 一 般 用 于 显示 
商店 编号 。 
口 ” 其 他 可 设 定 属性 

其 他 可 设 定 的 属性 有 autofocus、disabled、form 和 name。 
程序 实例 ch9_13.html : 制作 一 个 对 自己 居住 城市 满意 度 的 调查 ， 其 中 在 第 10 行使 用 hidden 属 
性 ， 当 用 户 单 击 “ 送 出 查询 ”按钮 时 ，govID:001 数值 也 将 被 传送 至 服务 器 端 。 
i 


3 <head> 
a ‘<meta charset="utf-8"> 


itle>ch9_13.html</titl 
ee 对 自己 居住 县 市 的 满意 度 
7 < > 
8 4 action="cgi-bin/get.exe” method-"get"> 
9 ”<h1> 对 自己 居住 县 市 的 滴 意 度 </h1> 


19 <p>xinput type="hidden" name="gov" value="govID:061"></p> 回 满意 

11 xbr> 

12 p><input type-"radio” name-"city”value-"A"> 满 意 (/p> 口 沿 可 

13 <p><input type-"radio” name-"city”value-"B"> 尚 可 </p> OO 不 滑 间 

14 <p><input type-"radio” name-"city”value-"B"> 不 满意 </p> 

15 <p>cinput type="submit"><input type="reset"></p> i | a | 
16 </form> 

17 </body> 

18 </html> 


9-2-16 制作 输入 时 间 的 控件 time 属性 值 
这 个 属性 值 用 于 制作 时 间 输 入 的 控件 ， 它 的 使 用 格式 如 下 : 


<input type="time" 其 他 属性 > 

时 间 格 式 是 “hh:mm:ss”， 例 如 11:45 书写 格式 为 “11:45:0”0 或 “11:45”，step 的 默认 值 是 
“60” 秒 。 
口 ” 其 他 可 设 定 属性 

其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、max、min、name、 


readonly、 required、step 和 value。 
程序 实例 ch9_14.html : 编写 输入 当前 时 间 的 应 用 。 


人 首先 可 以 单 击 适当 的 时 间 字段 
> 再 将 鼠标 指针 移 至 时 间 输 入 框 右边 的 全 按钮 
区 处 ， 然 后 可 以 单 击 以 设 定 时 间 。 下 图 是 本 例 在 
Ci method="get"> Chrome 浏览 器 中 的 执行 结果 。 

9 <1-- 时 间 跳 动 使 用 默认 每 单位 1 分 钟 --> | 到 | 


19 <p> 设 定时 间 <input type="time" name="t"></p> 设 定时 间 [--:-- -- | 设 定时 间 e5:63 mm 

11 <1-- 时 间 跳 动 使 用 每 单位 2 分 钟 --> | 3 
12 <p> 设 定时 间 <input type="time” name="t” step="126"></p> 设 定时 间 |-- 设 定时 间 es:6e8 Pm 
a 设 定时 间 [ 一 设 定时 间 [66735:03 加 x | 


14 <p> 设 定时 间 <input type="time” name="t” step="1”></p> 
15 </formm> 
16 </body> 
17 </html> 
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9-2-17 ”制作 输入 日 期 的 控件 date 属性 值 
这 个 属性 值 用 于 制作 日 期 输入 的 控件 ， 它 的 使 用 格式 如 下 : 


<input type="date" 其 他 属性 > 

日 期 格式 是 “YYYY-MM-DD” 例如 ，2018 年 11 月 9 日 书写 格式 为 “2018-11-09”，step 的 默 
认 值 是 “1 日 ”。 
口 ” 其 他 可 设 定 属性 

其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、 list、max、min、name、 


readonly、required、step 和 value。 


程序 实例 ch9_15.html : 编写 输入 出 生日 期 的 应 用 。 


le EE 各 对 下 图 是 本 例 在 Chrome 浏览 器 中 
<htm 

3 <head> 的 执行 结果 。 

4 <meta charset="utf-8"> 

5 <title>ch9_15.html</title> 出生 日 章 eyos/ywy 如 出 生日 出国 /6271996 x 下 

6 </head> tao » 回忆 
7 <body> [Sn Mm Tue Wed Ty FI Sa 
8 <form action="cgi~bin/get.exe" method="get"> "| sa 
9 ”<p> 出 生日 期 <input type="date” name="dd"></p> A 
10 </form> | 上 时 时 是 晤 是 全 | 
11 </body> 

ti 本 例 在 不 同 浏览 器 可 能 会 有 不 同 的 呈现 方式 。 


9-2-18 ”制作 输入 周 次 week 属性 值 
这 个 属性 可 以 用 于 制作 是 第 几 周 次 的 输入 字段 ， 它 的 使 用 格式 如 下 : 


<input type="week" 其 他 属性 > 


周 次 格式 是 “YYYY-Www”， 例 如 ，2018 年 第 30 周 次 书写 格式 为 “2018-W30” step 的 默认 值 
是 “1 周 ”。 
程序 实例 ch9_16.html : 编写 输入 周 次 的 应 用 。 


<ldoctype html> 
<html> 输入 周 次 :Week --，---- 。 作 w| 
<head> 一 
<meta charset="utf-8"> 
<title>ch9 16.html</title> 
</head> 
<body> 
<form action="cgi-bin/get .exe” method="get"> 
<p> 输 入 周 次 :<input type="week” name="wnum"></p> | 
19 </form> | 输入 周 次 
11 </body> | 
12 </html> 


右 图 是 本 例 在 Chrome 浏览 器 中 
的 执行 结果 。 


ovaowmPwnNhP 


中 


Week Sun Mon Tue Wed Thu Fr Sat 


3 1 


2 56 7 8 9 10 1 人 


3 1 二 全 7 井 但 
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9-2-19 制作 输入 年 份 和 月 份 month 属性 值 
这 个 属性 可 以 用 于 制作 年 份 和 月 份 的 输入 字段 ， 它 的 使 用 格式 如 下 : 


<input type="month" 其 他 属性 > 


年 月 格式 是 “YYYY-MM”， 例 如 ，2018 年 8 月 书写 格式 为 “2018-08”，step 的 默认 值 是 “1 个 月 ”。 


口 ” 其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、list、max、min、name、 


readonly、required、step 和 value。 
程序 实例 ch9_17.html : 编写 输入 指定 的 年 份 和 月 份 的 应 用 。 
dooce 下 图 是 本 例 在 Chrome 浏览 器 中 


3 <head> 的 执行 结果 。 


4 <meta charset="utf-8"> 

5 <title>ch9_17.html</title> 和 入 用 级 MAN 
6 </head> 

7 <body> 

8 <form action="cgi-bin/get .exe” method="get"> 

9 ”<p> 输 入 月 份 :<input type="month” name="mon"></p> 
19 </form> 

11 </body> 

12 </html> 


9-2-20 ”本 地 与 世界 标准 时 间 datetime/datetime-local 属性 值 


datetime 可 设 定 世 界 时 间 (格林 威 治 时 间或 称 Coordinated Universal Time (UTC))， 也 可 称 
GMT 时 间 ; datetime-local 可 设 定 本 地 时 间 。 下 列 是 这 两 种 时 间 的 书写 格式 : 

datetime : YYYY-MM-DDThh:mm:ssZ， 例 如 “2017-06-02T13:30:50Z” 代 表 2017 年 6 月 2 日 
13 点 30 分 50 秒 。 

datetime-local : YYYY-MM-DDThh:mm:ss， 例 如 “2017-06-02T13:30:50” 代 表 本 地 时 间 2017 年 
6 月 2 日 13 点 30 分 50 秒 。 

这 两 个 属性 的 使 用 格式 如 下 : 


<input type="datetime"” 其 他 属性 > 
<input type="datetime-local"” 其 他 属性 > 


口 ” 其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autocomplete、autofocus、disabled、form、 list、max、min、name、 


readonly、required、step 和 value。 


程序 实例 ch9_18.html : 设 定 输入 UTC 时 间 和 本 地 时 间 的 应 用 。 


19 。 “p> 输 入 本 二 时 间 :<input type="datetime-local” name="dt1"></p> 


1 《ldoctype html> 
2 <html> 11 </form> 
3 <head> 12 </body> 
a <meta charset="utf-8"> 13 </htm> 
5 <title>ch9 18.html</title> 
6 </head> /二 和 
和 请 下 图 是 本 例 在 chrome 浏览 器 中 
8 《form action="cgi-bin/get.exe” method="get"> 一 
ee 的 执行 结果 。 


9 。 <p> 箱 入 UTC 时 间 :<input type="datetime™ name="dt"></p> 
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输入 UTC 时 则 


输入 本 地 时 间 所 /3/72817 358 风 xs 


输入 UTC 时 间 ; 


笨 入 本 地 时 间 怖 /dd/ywy --:-- -- 


上 述 UTC 时 间 需 用 标准 方式 输入 。 


9-2-21 制作 选择 文件 后 上 传 的 file 属性 值 


这 个 属性 可 以 建立 表单 和 按钮 让 用 户 选择 文件 后 上 传 。 下 面 是 这 个 属性 的 使 用 格式 : 
<input type="file" 其 他 属性 > 


口 enctype 
在 form 元 素 内 需要 设 定 “multipart/form-data” 才 可 以 制作 可 上 传 的 表单 。 
口 ” 其 他 可 设 定 属性 
其 他 可 设 定 的 属性 有 autofocus、disabled、form、multiple、name、required 和 value。 


程序 实例 ch9_19.html : 可 选择 要 上 传 文件 的 应 用 。 
1 <ldoctype html> 上 图 中 ， 单 击 “打开 ” 按钮 可 以 选择 文件 ， 


2 <html> en 
3 <head> 下 图 所 示 。 


<meta charset="utf-8"> 


4 
5 <title>ch9 19.html</title> 一 
6 </head> 上 传 文件 : CUsersWin-KweiDesktf 浏览 .| 
7 <body> 

8 <form action="cgi-bin/formsample.php” method="post” 上 传 文件 ED 

9 enctype="multipart/form-data"> 

19 <p> 上 传 文件 : 

11 <input type="file” name="fileupload"> 人 ] » 、 y y 
二 和 单 击 “ 重 新 设 定 ”按钮 可 以 取消 所 选 文件 ， 


Me 结果 如 下 图 所 示 。 


14 <input type="submit”value=" 上 传 文件 "> 
15 <input type="reset”value=" 重 新 设 定 "> 


16 </p> 上 传 文件 : 浏览 … 


17 </form> 


1 ooty 


19 </html> 


执行 结 
| 
[LE 全 文件 
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号 e 恒 建立 多 行 输入 的 文字 框 <textarea> 元 素 


这 个 元 素 可 以 用 于 建立 文本 多 行文 字 的 文字 
字 框 的 默认 文字 ， 有 类 似 提醒 的 效果 。 这 个 元 素 
式 如 下 : 


<textarea 属性 > … </textarea> 


口 cols 


可 


OD rows 
| 设 定 行 数 ， 预 设 是 2 行 。 
口 wrap 


习 


到 


soft : 这 是 默认 值 ， 除 了 按 Enter 键 造成 的 换 


框 ， 如 果 预 先 在 此 输入 文字 ， 则 这 些 文字 将 成 为 文 
常 被 应 用 在 供 消费 者 回馈 意见 。 这 个 元 素 的 使 用 格 


设 定 文字 框 的 宽度 ， 相 当 于 1 行 可 以 输入 的 英文 字符 数 ， 默 认 是 20 个 字 。 


j 设 定 传送 文字 框 内容 至 服务 器 时 要 不 要 加 上 换行 符 ， 可 以 有 下 列 两 种 选择 。 


行 外 ， 其 他 皆 不 加 换行 符 传送 。 


hard : 如 果 设 定 这 个 属性 ， 则 rows 属性 一 定 要 设 定 字段 宽度 ， 只 要 因 宽 度 换行 的 地 方 传送 时 一 


定 要 加 上 换行 字符 。 
口 ” 其 他 可 设 定 属性 


其 他 可 设 定 的 属性 有 autofocus、dirname 
readonly 和 required。 


、disabled、 form、maxlength、name、placeholder、 


程序 实例 ch9_20.html : 设计 消费 者 意见 回馈 区 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

ED <title>ch9 20.html</title> 

6 </head> 

7 <body> 

8 <form action="cgi-bin/formsample.php”method-"post"y 

9 。 <hl> 欢 迎 进入 JobExam 市 调 系统 c/h1> 

19 《<p> 请 留 个 人 资料 </p> 

11 <p> 姓 名 :<input type="text” name="user” autofocus></p> 

12 <1-- 建立 年 性 别 分 析 数据 --> 

13 <p> 性别 :<br> 

14 <input type-"radio" name-"sex" value-"1” checked> 男 性 <br> 

15 <input type="radio” name-"sex”value="@”> 女 性 <br> 

16 /p> 

17 <1-- 建立 使 用 者 回馈 机 制 --> 

18 ”<p> 请 给 JobExam 系 统 使 用 建议 </p> 

19 <p><textarea name="opinion1” cols="39" rows="5">¢/textarea></p> 
26 <p> 下列 文字 框 使 用 系统 默认 大 小 /p> 

21 <p><textarea name="opinion2"> 文 字 框 使 用 默认 大 小 </textarea></p> 
22 </form> 

23 </body> 

24 </html> 


欢迎 进入 JobExam 市 调 系 统 


请 密 个 人 人 料 

姓 物 

性 别 : 
生男 性 
女性 

请 给 JobExam 系 统 使 用 建议 


下 列 文字 框 使 用 系 弦 默 认 大 小 


RA |] 
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se 和 为 对 象 加 上 关联 标记 <label> 元 素 


至 今 所 学 的 表单 制作 ， 在 组 件 旁 的 域名 皆 是 无 法 和 表单 属性 有 任何 关联 的 普通 文字 。label 元 素 
可 以 将 域名 和 表单 组 件 产生 关联 ， 甚 至 在 应 用 于 单 选 按钮 或 复 选 框 时 ， 只 要 单 击 域名 就 能 达到 选取 
的 目的 。 这 个 元 素 的 使 用 格式 如 下 : 

<label for="id 名 称 "> 关联 文字 </label> 


口 for 


若 想 将 表单 组 件 应 用 label 做 关联 文字 ， 表 单 组 件 内 需 有 id 属性 并 设 定 此 值 ， 然 后 将 表单 id 值 
设 为 for 属性 值 ， 这 样 就 可 以 产生 关联 。 


口 “ 全 局 属性 global attributes 


接 下 来 的 实例 的 第 17 行 和 19 行 所 使 用 的 <input> 元 素 会 使 用 到 id 属性 ， 这 是 一 个 全 局 属性 。 
所 谓 全 局 属性 是 指 此 类 属性 可 以 用 在 大 多 数 的 HTML 元 素 中 ， 笔 者 将 在 10-1 节 列 出 所 有 全 局 属性 
和 每 一 属性 的 意义 。id 属性 用 作 元素 对 象 的 识别 值 ， 这 值 是 唯一 的 ， 在 各 对 象 关联 时 使 用 。 后 面 章 
节 会 有 更 多 id 属性 的 应 用 。 
程序 实例 ch9_21.html : 重新 设计 ch9_8.html 和 ch9 9.html， 使 用 label 标记 将 这 两 个 程序 的 域名 和 
单 选 按钮 与 复 选 框 进行 关联 。 


1 <ldoctype html> Z 二 4 士 EE 

2 <htm> EE 起 ;对 下 图 所 示 为 只 要 单 击 关 联 
3 <head> 

4 <meta charset-"utf-gry 文字 (例如 CSS3)， 即 可 选取 。 

5 <title>ch9 21.html¢/title> 

5 </head> 站 
7 <body> 迎 进入 DeepStone i 多 

8 <form action-"cgi-bin/get.exe” method-"get"> 欢 pS 民意 调查 系统 

9 <h1> 欢 迎 进入 Deepstone 民 意 调查 系统 </hi> i 

10 <p> 请 留 个 人 资料 </p> 请 窗 个 人 资料 

11 <p> 姓名 : 洪 锦 既 

12 <1abel> 姓 名 :<input type-"text" name-"user" autofocus></label> 

13 </p> 性 别 : 

14 <1-- 建立 年 性 别 分 析 数 据 --> 日 男 p 

15 ”<p> 性别 :</p> @@ 男性 全 女性 

16 <p> 软件 能 力 分 析 数 据 : 

17 <input type="radio”name="sex”value="1”id="M"> 

18 <1abe] for="M"> 男 性 </1abel> DB HTML © Co ~ 
19 <input type="radio”name="sex”Value="9”id="F"> 

29 <label for="F"> 女 性 </1abel> i 
21 </p> 、 日 
22 <1-- 建立 软件 能 力 分 析 数据 --> 欢迎 进入 DeepStone 民 意 调 查 系 统 

23 。 “p> 软 件 能 力 分 析 数 据 :<br> 

24 <p> 请 留 个 人 资料 

25 <input type="checkbox”mame="softw”value="html”id="HT"> 

26 <label for="HT">HTMLS</label> 姓名 : 洪 锦 册 

27 <input type="checkbox”mame="softw”value="css”id-"Cs" te 

28 <label for-"cs">css3¢/label> 

29 </p> 加 男性 自 女性 

3 </form> 

31 </body> 软件 能 力 分 析 数 据 : 

32 </html> 日 HTMLS 固 CSt8 ~ 
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显示 进度 <progress> 元 素 


这 个 元 素 可 以 用 来 显示 执行 进度 ， 它 的 使 用 格式 如 下 : 

<progress value=" 进度 值 "max=" 进度 的 最 大 值 "> … </progress> 
口 value 

进度 值 ， 此 值 必须 是 0 以 上 ，max 以 下 的 数值 。 如 果 没 有 此 值 会 显示 正在 进行 中 ， 不 同 浏览 器 
显示 方式 可 能 有 差异 。 
口 “_max 

进度 的 最 大 值 ， 也 可 理解 成 完成 时 的 数值 。 


程序 实例 ch9_22.html : 列 出 两 个 进度 值 ， 一 个 是 不 设 进度 值 value， 另 一 个 是 将 进度 值 设 为 35， 
最 大 进度 值 是 100。 


1 xldoctype html> 下 图 是 本 例 在 IE 
2 <html> 

3 <head> 浏览 器 中 的 执行 结果 。 

4 <meta charset="utf-8"> 

- <title>ch9 22.html</title> 未 指明 进度 : 

6 </head> 

i 执行 进度 

8 <form action="cgi-bin/get .exe" method="get"> 

9 <1-- 不 设 进 度 --> Chrome 浏 ! 

16 <p> 未 指明 进度 :<progress max="198"></progress></p> 下 图 是 在 浏览 器 中 的 
11 <1-- 设 定 35% --> 执行 结果 。 

12 <p> 执 行进 度 :<progress value="35”max="166"></progress></p> 

13 </form> 未 指明 进度 :[ IL ] 

14 </body> 执行 进度 -和 ] 

15 </html> 


| 9-6 | 显示 仪表 值 <meter> 元 素 


这 个 元 素 可 以 显示 出 某 范围 的 仪表 值 ， 也 可 称 仪表 值 ， 它 的 使 用 格式 如 下 : 
<meter value=" 仪表 值 ”max=" 最 大 值 ”min=" 最 小 值 "> … </meter> 


口 value DO high 
这 个 属性 为 仪表 值 ， 必 须 存在 。 高 标准 值 ， 若 省 略 则 和 max 值 相 同 。 
口 _max 口 low 
范围 的 最 大 值 ， 若 省 略 则 默认 值 是 1 。 低 标准 值 ， 若 省 略 则 和 min 值 相 同 。 
DO min 口 optimum 
范围 的 最 小 值 ， 若 省 略 则 默认 值 是 0。 最 佳 值 ， 如 果 不 写 则 是 取 max 和 min 的 中 


间 值 。 
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程序 实例 ch9_23.html : 列 出 0 至 100 范围 内 的 仪表 值 75。 


1 <ldoctype htnl> 

2 <htmly 

3 <head> 

4 <meta charset="utf-8"> 

5 <titleych9 23.html</title> 

6 </head> 

7 <body> 

8 <form action="cgi-bin/get.exe" method="get"> 
9 《1-- 不 设 证 min,high 和 low --> 

19 <p> 未 指明 minhigh 和 low; 


了 4 <meter Value="75”max="106"></meter> 

12 py 

13 <1-- 有 设 定 nin,high 和 low --> 

14 。 <p> 有 设 定 minvhigh 和 low: 

15 <meter value="75"” max="168" min="9" high="85" low="60"></meter> 
16 </p> 

17 </form> 

18 </bodyy 

19 </html> 


EE 和 上 车 下 图 是 本 例 在 Chrome 浏览 器 中 
的 执行 结果 。 

未 指明 min.high 和 low: I 二 

有 设 定 min,high 和 low: 让 


<metter> 元 素 在 应 用 时 有 时 会 磁 上 浏览 器 不 
支持 的 情况 ， 此 时 可 以 将 仪表 值 写 在 <meter> 元 
素 内 ， 这 样 不 支持 的 浏览 器 会 直接 列 出 数值 。 可 
参考 下 列 实例 。 
程序 实例 ch9_24.html : 列 出 中 国美 女 票选 结 
果 ， 这 个 程序 会 用 IE 和 Chrome 浏览 器 执行 ， 
由 于 IE 不 支持 此 元 素 ， 所 以 直接 列 出 得 票 率 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

本 <title>ch9 24.html</title> 

6 </head> 

7 <body> 

3 <h1> 中 国美 女 票 选 结果 </h1> 

9 <form action="cgi-bin/get.exe” method="get"> 
19 ”<p> 西 施 得 票 率 : 


11 <meter value="58" max="100">58%</meter> 
12 </p> 

13 《p> 生 详 得票 率 ; 

14 <meter value="18" max="100">18%</meter> 
15 </p> 

16 <p> 冰冰 得 票 率 : 

17 <meter value="24" max="190">24%</meter> 
18 </p> 

19 «</form> 

26 </body> 

21 «</html> 


以 下 分 别 是 本 例 在 下 浏览 器 
( 左 图 ) 和 Chrome 浏览 器 ( 右 图 ) 中 的 执行 
结果 。9-7、9-8 节 各 程序 实例 的 执行 结果 也 是 
左 图 为 正 浏览 器 ， 右 图 为 chrome 浏览 器 ， 下 
面 不 再 袭 述 。 


中 国美 女 票选 结果 | 中 国美 女 票选 结果 
丁 施 得 村 率 : 8% 
如 蜂 得 票 率 : 189% 
冰冰 得 要 下 : 2496 


下 拉 式 选单 与 列表 框 <select> 和 <option> 元 素 


这 组 元 素 配 合 不 同 的 属性 可 以 建立 下 拉 式 选单 与 列表 框 ， 下 面 将 分 别 说 明 。 


9-7-1 建立 下 拉 式 选单 


<select> 元 素 用 于 建立 下 拉 式 选单 的 框架 ，<option> 元 素 则 用 于 建立 下 拉 式 选单 的 选项 。 这 组 


元 素 的 使 用 格式 如 下 : 
<select name=" 框架 名 称 "> 


<option value=" 选单 "> … 


<option value=" 选单 Me 
</select> 
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</option> 


</option> 


DQ name 
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<select> 元 素 内 的 name 属性 用 于 指定 下 拉 式 选单 框架 名 称 。 


口 value 


选单 代表 值 ， 该 值 将 被 传送 到 服务 器 。 如 果 省 略 value， 则 <option> 元 素 内 容 将 被 传送 至 服务 


器 端 。 


口 _ selected 


<option> 元 素 如 果 有 selected 属性 ， 代 表 这 个 选项 是 默认 值 了 。 


口 ” 其 他 可 设 定 属性 


<select> 元 素 的 可 设 定 属性 : autofocus、disabled、form、name 和 required。 


<option> 元 素 的 可 设 定 属性 : disabled 和 label。 


程序 实例 ch9_25.html : 这 个 程序 的 第 一 组 下 拉 式 选单 ， 默 认 选 项 会 列 出 “博士 ” 因为 在 程序 第 
15 行 有 selected 属性 ; 第 二 组 下 拉 式 选单 ， 没 有 一 个 选项 有 selected 属性 ， 所 以 依 顺 序列 出 默认 选 


项 台积电 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

a <meta charset="utf-8"> 

5 <title>ch9 25.html</title> 
6 </head> 

7 <body> 

8 <h1l>Deepstone 民 意 调查 中 心 </h1> 
9 <form action="cgi-bin/get .exe” method="get"> 
1 ”<p> 选 举人 学 历 </p> 

11 <p> 


12 <select name="Edu"> 

13 <option value="BA"> 大 学 </option> 

14 <option value="MS"> 硕 士 </option> 

15 <option value="PhD”selected> 博 士 </option> 
16 </select> 

17 </p> 

18 《p> 选择 心中 最 佳 企业 </p> 

19 <p> 

29 <select name="Cor "> 

21 <option value="TSMC"> 台 积 电 </option> 

22 <option value="Alibaba"> 阿 里 巴巴 </option> 
23 <option value="Amazon"> 亚 马 进 </optiony> 
24 </select> 

25 </p> 

26 </form> 

27 </body> 

28 </html> 


9-7-2 建立 列表 框 


DeepStone 民 意 调查 中 心 
志 举 人 学 历 

EF 

远 择 必 中 最 个 企业 

台积电 v| 


DeepStone 民 意 调查 中 心 
选举 人 学 历 
Ez 


选择 心中 最 佳 企业 


CE 
EE 
由 


<select> 和 <option> 元 素 互 相 搭配 可 以 制作 另 一 种 表单 ， 称 列表 框 。 下 面 是 组 成 列表 框 的 


<select> 元 素 的 属性 设 定 : 
口 size 
列表 框 的 行 数 。 
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口 _multiple 

若 设 定 这 个 属性 则 选项 可 以 复 选 。 若 省 略 size 而 设 定 这 个 属性 则 size 默认 是 4 行 。 
程序 实例 ch9_26.html : 重新 设计 程序 实例 ch9_25.html， 其 中 选举 人 学 历 增 为 5 个 选项 ， 然 后 以 3 
个 选项 行 数 显示 列表 框 ， 仍 然 只 能 选择 一 个 ， 但 是 将 默认 选项 改 为 “大 学 ”。 至 于 心中 理想 企业 则 可 
以 复 选 ， 由 于 省 略 了 size 属性 ， 所 以 以 4 个 选项 行 数 显示 列表 框 ， 使 用 鼠标 单 击 理想 企业 时 ， 只 要 


同时 按 Ctrl 键 即 可 复 选 。 

1 <!doctype html> 27 <option value="Intel"> 英 特 尔 </option> 

2 <html> 28 <option value="Microsoft"> 微 软 </option> 
3 <head> 29 </select> 

4 <meta charset="utf-8"> 39 </p> 

5 <title>ch9_26.html</title> 31 </form> 

6 </head> 32 </body> 

7 <body> 33 </html> 


8 <h1>DeepStone 民 意 调查 中 心 </hl> 


9 <form Ce iri method="get"> 

10 h2> 选 举人 学 历 </h2: 行 

1 < 执行 结果 
HS i 


13 

2 DeepStone 民 意 调查 中 心 ”DeepStone 民 意 调查 中 心 
16 <option vaLue="MS"> 硕 士 </option> 选举 人 学 历 选举 人 学 历 

27 <option value="PhD"> 博 士 </option> a 

18 </select> 本 > He 

19 </p> Wa 有 

29 <h2> 选 择 心中 理想 企业 </h2> 选择 心中 理想 企业 选择 心中 理想 企业 
21 <p> 可 以 复 选 </p> 

3 EEC ETT 

23 <select name="Cor" Multiple> FE p 

24 <option value="TSMC"> 台 积 电 </option> 3 二 

25 <option value="Alibaba"> 阿 里 巴巴 </option> 下 a 

26 <option value="Amazon"> 亚 马 渤 </option> 


9-7-3 选项 组 化 <optgroup> 元 素 

如 果 所 建 的 选单 项 目 有 很 多 时 ， 依 特性 分 类 以 层级 方式 显示 时 有 助 于 使 用 者 可 以 比较 容易 找到 
选单 项 目 。<optgroup> 元 素 可 以 将 <select> 和 <option> 元 素 所 建 的 下 拉 式 选单 内 容 群 组 化 ， 以 层级 
方式 显示 ， 它 的 使 用 格式 如 下 : 


<optgroup label=" 组 名 "> 
<option label=" 选项 名 称 "> … </option> 


<option label=" 选项 名 称 "> … </option> 

</optgroup> 
口 <optgroup> 元 素 的 label 

这 是 群 组 选项 的 名 称 ， 不 可 省 略 。 
口 <option> 元 素 的 label 

这 是 个 别 的 选项 名 称 ， 如 果 浏 览 器 能 支持 ， 它 会 比 <option> 元 素 内 容 更 优先 显示 ， 如 果 省 略 则 
以 <option> 元 素 内 容 显示 。 
口 value 

单 击 时 将 传送 到 服务 器 端的 值 ， 如 果 省 略 则 <option> 元 素 内 容 被 传送 。 
口 ” 其 他 可 设 定 属性 

<optgroup> 元 素 中 其 他 可 设 定 的 属性 有 disabled。 
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程序 实例 ch9_27.html : 本 例 是 群 组 化 下 拉 式 选单 的 应 用 ， 在 选单 中 有 两 个 群 组 ， 分 别 是 “亚洲 ” 


和 “欧洲 ”。 

1 <ldoctype html> 

2 <html> 

3 <*head> 

4 <meta charset-"utf-8"> 

5 <title>ch9 27.html</title> 

6 </head> 

7 <body> 

8 <h1>DeepStone 民 意 调查 中 心 </h1> 

9 <form action="cgi-bin/get.exe” method="get"> 
19 ”<h2> 选 择 未 来 3 年 最 想 去 的 旅游 坡 市 </h2> 
11 p> 


12 <select name="Count 

13 <optgroup label=" 亚 洲 "> 

14 <option label= value="TK"> 东 京 </option> 
15 <option label: value="8]") 北 京 </option> 
16 <option label-" 香 港 ”value-"Hk"> 香 港 </option> 
17 </option> 

18 <optgroup 1abel=" 欧 洲 "> 

19 <option label=" 伦 敦 ”value="LN"> 伦 敦 </option> 


29 <option 1abel=" 巴 化 ”value="pA"? 巴 黎 c/optiony 
21 <option label=" 维 也 纳 ”value="VN"> 维 也 纳 </option> 
22 </option> 
23 </select> 
24 -</p> 
25 </form> 
25 </body> 
27 </html> 
执行 结果 
DeepStone 民 意 调查 中 心 DeepStone 民 意 调查 中 心 
选择 未 来 3 年 最 想 去 的 旅游 城市 选择 未 来 3 年 最 想 去 的 旅游 城市 
一 | CE | 
时 
EE 


程序 实例 ch9_28.html : 重新 设计 程序 实例 ch9_27.html， 与 上 个 程序 有 下 列 儿 项 差异 。 

(1) 这 是 复 选 ， 程 序 的 第 13 行 ，<select> 元 素 内 增加 了 Multiple 属性 。 

(2) 程序 第 15 行 ，<option> 元 素 内 容 笔者 故意 省 略 字符 串 “东京 ”， 但 它 依旧 可 以 正常 显示 ， 
这 是 为 证 明 <option> 元 素 内 容 磁 上 浏览 器 不 支持 时 显示 备用 的 。 

(3) 程序 第 16 行 ，<option> 元 素 内 笔者 故意 省 略 label 标记 内 容 “ 北 京 ”， 但 它 依旧 可 以 正常 
显示 ， 这 是 为 证 明 省 略 <option> 元 素 的 label 内 容 时 ， 可 以 用 元 素 内 容 取代 。 

(4) 程序 第 17 行 ， 笔 者 故意 将 <option> 元 素 内 容 写 “香港 岛 ”， 但 是 选单 显示 的 仍 是 “ 香 
港 ”， 这 是 为 证 明 label 属性 内 容 相 较 于 元 素 内 容 会 优先 显示 。 

(5) 程序 第 20 行 ， 笔 者 在 <option> 元 素 内 加 上 selected 属性 ， 所 以 程序 一 执行 ， 默 认 选 项 “ 伦 


敦 ” 即 被 选取 。 


1 <ldoctype htmly 
2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <title>ch9 28.html¢/title> 

6 </head> 

7 <body> 

8 <h1l>Deepstone 民 意 调查 中 心 </h1> 

9 <form action="cgi-bin/get .exe” method="get"> 
10 ”<h2> 选 择 未 来 3 年 最 格 去 的 旅游 城市 </h2> 

毅 《p> 可 以 复 选 </p> 


12 <p> 
13 。 <select name="Country”Nultipley 

14 <optgroup 1abel=" 亚 洲 "> 

15 <option 1abel=" 东 京 ”value="TK"></option> 

16 <option value="BI"> 北 京 </option> 

17 <option label-" 香 港 ”value="HK"> 香 港 马 c/optiony 

18 </optiony 

19 <optgroup 1abel=" 欧 洲 "> 

20 <option label=" 伦 敦 ” value="LN”selected> 伦 敦 </option> 
21 <option 1abe1=" 巴 获 " value="pa"> 巴 黎 c/option> 


22 <option 1abel=" 维 也 钠 ”value="VN"> 维 也 商 </option> 
23 </option> 

24 </select> 

25 </p> 

26 </form> 

27 </body> 

28 </html> 


下 列 分 别 是 本 例 在 正 浏览 器 〈 左 
图 ) 和 Chrome 浏览 器 右 图 ) 中 的 执行 结果 。 


DeepStone 民 意 调查 中 心 ”DeepStone 民 意 调查 中 心 
选择 未 来 3 年 最 想 去 的 旅游 城市 


本 以 复 选 


选择 未 来 3 年 最 想 去 的 旅游 城市 


可 以 复 千 


甘于 制 人 文字 全 的 候补 选 页 <datalist> 和 <option> 元 素 


有 时 在 使 用 <input> 元 素 建立 的 输入 文字 框 (9-2-3 节 ) 或 搜索 框 〈9-2-5 节 ) 内 ， 人 允许 用 户 自 
行 输入 要 传送 的 数据 ， 也 允许 建立 一 些 候补 选项 ， 供 输入 时 做 选择 。 在 建立 候补 选项 时 ， 可 以 利用 
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<datalist> 和 <option> 元 素 建立 候补 选项 数据 。 这 组 元 素 的 使 用 格式 如 下 : 


<datalist id=" 值 "> 
<option 属性 > … </option> 


<option 属性 > … </option> 
</datalist> 
口 id 
<datalist> 元 素 id 属性 值 的 内 容 应 该 与 使 用 <input> 元 素 建立 输入 框 组 件 的 list 属性 值 内 容 相 
同 ， 如 此 才 可 将 <datalist> 元 素 和 <input> 元 素 进行 关联 。 
程序 实例 ch9_29.html : 本 例 是 一 个 输入 资料 的 应 用 ， 可 以 用 直接 输入 方式 ， 也 可 以 单 击 输入 框 ， 


之 后 单 击 候补 选项 再 输入 。 

1 <ldoctype htmly 16 <option value=" 企 业 会 员 "></option> 
2 <html> 17 </datalist> 

3 <head> 18 </form> 

4 <meta charset="utf-8"> 19 </body> 

日 <title>ch9 29.html</title> 29 </html> 

6 </head> 


7 <body> 一 
8 <form action="cgi-bin/get.exe” method="get"> 执行 结果 


9 。 “《h2> 请 输入 会 员 数 据 </h2> 
19 。 “<p> 姓 名 ;<input type="text”" name="user” list="member"></p> 


11 p>cinput type="submit”value=" 确 认 "> 请 输入 会 员 数 据 请 输入 会 员 数 据 
12 <input type="reset”value=" 取 消 "></p> EF 

13 cdatalist id="member"> 姓名 : 好 各 I 
14 《<option value=" 外 国 参 访 "></option> ET nen 

15 <option value=" 临 时 会 员 "></option> 站 | 


攻 芝 j 表单 组 件 群 组 化 <fieldset> 和 <legend> 元 素 


一 个 表单 难免 会 有 许多 组 件 ， 为 了 表单 整理 方便 ，HTML 提供 功能 可 以 将 表单 的 各 组 件 组 织 起 
来 ， 这 个 群 组 化 的 表单 将 有 外 框 。<fieldset> 元 素 主要 是 将 所 有 的 表单 组 件 组 织 起 来 ， 在 <fieldset> 
元 素 内 的 开头 需 加 <legend> 元 素 ， 这 个 元 素 用 来 设 定 这 个 群 组 化 表单 的 标题 。 下 列 是 这 两 个 元 素 的 


使 用 格式 。 
<fieldset> 
<legend> 表单 标题 </legend> 


</fieldset> 


口 ” 其 他 可 设 定 属性 
<fieldset> 元 素 中 其 他 可 设 定 的 属性 有 disabled、form 和 name。 
程序 实例 ch9_30.html : 建立 数据 调查 表 的 应 用 。 
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<ldoctype htmly 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch9 38.html</title> 
</head> 
<body> 
<form action="cgi-bin/formsample,php” method="post"> 
<fieldset> 
<legendyJobExam 客 户 资料 词 查 表 c/legend> 
<p> 
<label> 姓 名 :<input type="text" name="user"” required></label> 
<label> 出 生日 期 :<input type="month” name="mon"></label> 
</py 
<p> 
<1label> 性 别 ;</1abel> 
<input type="radio” name="sex” value="1” id="M"> 
<label for="M"> 男 性 </1abel> 
<input type="radio” name="sex” value="@" id="F"> 
<label for="F"> 女 性 </label> 
/p> 
<p><label> 电 话 ;<input type-="tel” name-"phone”"></label></p> 
<p><label> 电 子 郎 件 :<input type="email” name="mail"></label></p> 
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24 <p> 
25 <input type-"submit” value- 
25 <input type="reset" value=" 
27 </p> 

28 </fieldset> 

29 </form> 

39 «</body> 

31 </html> 


"确认 ">&nbsp;&nbsp; 
消 


JobExam 才 户 资料 省 查 表 

EE | 
性 别 : D 男性 〇 女性 
电话 一 一 一 一 
电子 邮件 

EE 


9-10 | 加 密 密 钥 <keygen> 元 素 


<keygen> 元 素 可 以 在 传送 表单 时 产生 一 对 加 密 密 钥 ， 公 的 密 钥 会 送 到 服务 器 ， 私 的 密 钥 则 保存 
在 浏览 器 。 这 个 元 素 的 使 用 格式 如 下 : 


口 


<keygen keytype=" 加 密 方法 ”其 他 属性 > 


keytype 


加 密 的 方法 ， 目 前 有 rsa、dsa 和 ec 等 3 种 方法 ， 若 省 略 则 是 使 用 rsa。 


challenge 
指出 与 密 钥 一 起 传送 的 数据 将 被 认证 。 
其 他 可 设 定 属性 


其 他 可 设 定 的 属性 有 autofocus、disabled、form 和 name。 
程序 实例 ch9_31.html : 加 密 密 钥 的 应 用 。 


姓名 :| | 密 钥 :高 等 级 | 羽 | 送出 查询 


中 等 级 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch9 31.html</title> 
</head> 
<body> 
<form action="cgi-bin/formsample.php” method="post"> 
<p> 
姓名 :<input type="text” name="user"> 
密 铀 :<keygen name="security"> 
<input type="submit"> 
</p> 
</form> 
</body> 
</html> 
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习题 
1. 建立 下 列表 单 
标题 : 大 学 生 知识 技能 调查 表 
组 件 1 (text) : 姓名 
组 件 2 (radio) : 性 别 
组 件 3(date) : 出 生日 期 
组 件 4 Cemail) : 电子 邮件 
组 件 5 (month) : 毕业 年 月 
组 件 6 (text) : 毕业 学 校 
组 件 7 (text) : 毕业 科 系 
组 件 8 (checkbox) : 外 文 能 力 ， 选 项 5 种 ， 语 言 自 定 ， 可 以 复 选 
组 件 9 〈checkbox) : 证 照 列 表 ， 选 项 5 种 ， 科 目 自 定 ， 可 以 复 选 
组 件 10 : 请 参考 9-9 节 将 以 上 表单 组 件数 据 群 组 化 。 
2. 请 参考 上 一 题 ， 取 消 表单 组 件 群 组 化 ， 但 是 请 利用 第 6 章 所 介绍 的 表格 将 上 述 数据 以 表格 方式 
表达 。 
3. 请 为 便利 商店 建立 一 份 顾客 调查 表 网 页 ， 内 容 请 自行 发 挥 创 意 。 
4. 请 为 班级 建立 一 份 旅游 调查 表 网 页 ， 内 容 请 自行 发 挥 创意 。 
5. 假设 你 想 举 办 全 校歌 咏 比 赛 ， 请 建立 一 份 报名 表 ， 内 容 请 自行 发 挥 创意 。 


HTML 功能 总 结 


本 章 摘 要 


Thos] 
呈 人 0 过 
L003 
10-4 
= 
oO=6 
TEA 
TO 
10-9 


全 局 属性 

事件 属性 

认识 <script> 元 素 与 一 个 超 简单 的 JavaScript 应 用 
设 定 一 般 区 块 <div> 元 素 

设 定 一 般 范围 <span> 元 素 

区 块 层 级 与 行内 层级 

网 页 布局 

HTML 章节 的 概念 

日 期 与 时 间 <time> 元 素 


前 9 章 笔者 已 经 介绍 了 HTML 大 部 分 的 元 素 与 设计 网 页 的 基本 知识 了 ， 相 信 读 者 也 应 该 对 
用 HTML 设计 网 页 有 基本 概念 了 。 其 实 还 有 一 些 元 素 与 相关 知识 尚未 介绍 ， 主 要 原因 是 这 些 元 
素 与 知识 如 果 要 有 完美 的 应 用 ， 需 读者 有 CSS 或 JavaScript 知识 ， 如 果 冒 然 在 前 面 章节 穿插 
CSS 或 JavaScript 知识 会 让 学 习 HTML 网 页 设计 变 得 复杂 与 困难 。 
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| 10=1| 全 局 属性 


所 谓 全 局 属性 是 指 所 有 元 素 缘 可 以 使 用 的 属性 。 在 先前 章节 ， 笔 者 已 经 以 实例 说 明 过 id 属性 的 
用 法 了 ， 下 面 是 全 局 属性 的 说 明 。 
DO “accesskey 

设 定 按键 组 合 ， 执 行 时 将 焦点 指 到 这 个 窗 体 对 象 。 在 正 、Chrome、Safari 和 Opera 中 使 用 时 按 
Alttaccesskey 键 ， 例 如 ， 所 设 定 的 字母 是 e， 则 使 用 时 按 Alt+e。 
程序 实例 ch10_1.html : 重新 设计 ch9_4.html， 使 得 按 Altte 键 可 以 让 焦点 位 于 “取消 ”按钮 。 下 
面具 列 出 修改 的 第 13 行 ， 即 为 “取消 ”按钮 设 定 accesskey 为 e 键 。 


13 <input type=" reset'" value=" 取 消 " accesskey="e"></p> 


焦点 原先 在 账号 字段 ， 按 Altre 键 后 焦点 切换 到 “取消 ”按钮 ， 如 下 图 所 示 。 


欢迎 进入 DeepStone 系 统 欢迎 进入 DeepStone 系 统 


由 天 账号 -| 
冤 码 : 堵 码 : 


而 Er ED) 


DO class 
设 定 元 素 的 类 别 ， 在 本 书 第 二 篇 会 有 许多 这 方面 的 应 用 。 
DO contenteditable 


设 定 元 素 内 容 可 否 被 编辑 ， 它 的 值 可 以 是 “true” 或 “false”。 
程序 实例 ch10_2.html : 列 出 使 用 者 可 以 修改 的 网 页 内 容 。 


1 <ldoct html> 一 一 

2 <htnl> EE 二 对 下 列 左 图 是 本 例 的 执行 结果 ， 右 
3 <*head> 

4 meta charset-"utf-Bny 图 是 笔者 修改 内 容 后 的 结果 。 

5 <title>xch10 2.html</title> 

6 </head> 一 ae 站 

7 <body> 深 石 数字 | 深 石 DeepStone 数 字 | 

8 xp contenteditable="true"> 深 石 数 字 </p> 洪 锦 则 Deeps 

9 xpi contenteditable-"true"> 洪 从 挝 </p> os -|| 二 

19 </body> 


11 </html> 


DO contextmenu 

可 设 定 使 用 鼠标 右键 单 击 元 素 时 出 现 快捷 菜单 ， 目 前 只 有 FireFox 浏览 器 支持 。 
口 data 一 

提供 可 以 自行 定义 资料 的 场合 ， 常 被 用 在 JavaScript 设计 中 ， 以 创造 更 好 的 用 户 体验 。 在 使 用 
上 “*” 指 代 的 内 容 必 须 是 小 写字 母 ， 可 以 是 任何 长 度 。 下 列 是 自行 定义 数据 的 使 用 实例 。 


<ul> 
<li data-continent-loc="Europe">French</1i> 


<li data-continent-loc="Asia">China</1i> 
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<li data-continent-loc="Africa">Egypt</i> 


</ul> 


口 dir 
设 定 文字 方向 ， 它 的 值 可 以 是 “ltr”( 左 到 右 ) 或 是 “rtl”( 右 到 左 )， 默 认 是 从 左 到 右 。 
程序 实例 ch10_3.html : 测试 文字 方向 。 


1 <ldoctype html> 
2 <html> 执行 结果 


3 <head> 
4 <meta charset="utf-8"> 

5 <title>ch10 3.html</title> 文字 从 左 到 右 

Se ! 文 字 从 右 到 左 
8 <p2 文 字 从 左 到 右 </p> 

9 <p dir="rt1"> 文 字 从 右 到 左 1</p> 

19 </body> 

11 </html> 


口 draggable 

可 设 定 这 个 元 素 可 否 被 拖 忠 移动 ， 有 3 个 选项 (有关 这 方面 应 用 需 有 JavaScript 的 知识 》: 

true : 可 以 ; false : 不 可 以 ; auto : 由 浏览 器 决定 。 
口 hidden 

有 些 元 素 内 容 可 能 需要 移 除 或 是 暂时 不 需要 显示 ， 皆 可 以 使 用 这 个 属性 设 定 。 它 是 一 个 Boolean 
属性 (也 就 是 以 true 或 false 方式 呈现 )， 若 元 素 含 这 个 属性 ， 则 这 个 元 素 会 被 隐藏 。 网 页 设计 中 ， 
也 可 以 使 用 JavaScript 更 改元 素 的 hidden 属性 设 定 。 
程序 实例 ch10_4.html : hidden 属性 的 应 用 。 


1 ldortype pin 这 个 程序 执行 时 第 9 行 的 文本 
3 <head> “DeepStone” 将 被 隐藏 。 


4 <meta charset="utf-8"> 
5 <title>ch1e 4.html</title> 


J 深 石 数字 深入 学 习 
8 《<p> 深 石 数字 深入 学 习 </p> 

9 <p hidden>DeepStone</p> Deep Learning 

16 <p>Deep Learning</p> 

11 </body> 

12 </htnl> 


oo id 

这 个 属性 已 经 有 许多 实例 说 明了 ， 这 是 元 素 的 id， 是 唯一 的 。 
口 lang 

设 定 元 素 的 语系 ， 可 参考 2-2-3 节 或 程序 实例 ch10_5.html。 


口 spellcheck 
可 设 定 是 否 对 元 素 内 容 进行 拼 字 或 语法 检查 ， 使 用 时 它 的 值 可 以 是 “true” 或 “false”， 应 用 时 
可 以 对 下 列 3 种 元 素 进行 拼 字 或 语法 检查 。 
<input> 元 素 的 文本 内 容 ; 
<textarea> 元 素 的 内 容 ; 
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可 编辑 的 元 素 内 容 区 。 
备注 : 使 用 时 需 将 语系 设 为 英文 lang="en”。 
程序 实例 ch10_5.html : 输入 英文 并 按 Enter 键 后 ， 会 进行 拼 字 和 语法 检查 。 
i 下 方 左 图 是 本 例 执行 时 的 画面 ， 


2 <html> 
:cod 右 图 是 输入 英文 错字 的 画面 ， 均 以 Chrome 执 
5 <xtitleych16_ 5.html</title> 行 。 如 果 以 正 执行 ， 中 文字 部 分 也 会 被 视 为 拼 


6 </head> 


7 <body> 、 
8 <form action="cgi-bin/formsample.php” method="post"> 字 错 误 。 
9 <textarea lang="en" spellcheck="true" rows="5" cols="30"> 
19 ”可 输入 英文 ， 这 个 文字 框 可 以 进行 拼 字 与 语法 检查 人 
11 </textarea> 拼 字 与 语法 检查 

12 《/formy 
13 </body> 
14 </html> 


可 注入 次 文 ， 这 个 文字 柜 可 以 过 和 
拉 字 与 请 法 检查 
like football1| 


口 style 
这 个 属性 可 套用 到 元 素 的 CSS 样式 表单 ， 这 也 是 本 书 下 一 篇 的 主题 。 


口 tabindex 


这 个 属性 可 以 设 定 按 Tab 键 时 ， 焦 点 的 移动 顺序 。 
程序 实例 ch10_6.html : 控制 窗 体 对 象 的 焦点 顺序 ， 本 程序 执行 时 焦点 在 “取消 ”按钮 ， 然 后 按 


Tab 键 可 以 将 焦点 依次 序 转移 至 “账号 ”“ 密 码 ” 字 段 及 “确认 ” 钮 。 


1 <ldoctype html> 执行 结果 


2 <html> 


3 <head> 

4 <meta charset-"utf-8"y | 3 
5 <title>ch1e 6.html</title> 欢迎 进入 DeepStone 系 统 欢迎 进入 DeepStone 系 统 

6 /head> | i 接 Tab 健 

7 <body> | | 

a 《form action="cgi-bin/get.exe” nethod="get"> 6 | 


EW 


am 


9 <h2> 欢 迎 进入 peepstone 系 统 c/h2y 

19 。 <p? 账 号 :cinput type="text” name="user" tabindex="2"></p> 

11 <p> 密 码 :<input type="password" name="pwd” tabindex="3"></p> 
12 xpykinput type-"submit” value-" 兢 认 " tabindex="4"> 

13 <input type-"reset” value-" 取 消 " tabindex="1" autofocus></p> 
14 </form> 

15 </body> 

15 </html> 


口 title 
这 个 属性 用 于 定义 元 素 的 额外 信息 ， 如 果 将 鼠标 指针 移 至 元 素 ， 将 列 出 此 元 素 的 title 信息 。 
程序 实例 ch10_7.html : 如 果 将 指针 移 至 <textarea> 元 素 所 建 的 文字 框 ， 将 列 出 title 信息 。 此 例 的 


信息 在 程序 第 10 行 设 定 。 
ro 


3 <head> 下 图 是 用 Chrome 测试 的 结果 。 


4 cmeta charset="utf-8"> 
5 <title>ch19 7.html¢/title> 
6 </head> 
7 <body> 
8 <form action="cgi-bin/formsample. php" method="post"> v 
9 <textarea lang="en" spellcheck="true” rows="5" cols="30" > 
19 ”title-" 可 输入 英文 ， 这 个 文字 框 可 以 进行 拼 字 与 语法 检查 "> 
bl /textarea> 
12 </form> 

可 输入 英文 这 个 文字 框 可 以 进行 拼 字 与 语法 检查 


13 </body> 
14 </html> OO | 


口 
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translate 
这 个 属性 可 设 定 是 否 翻 译 此 文 ， 不 过 目前 主流 的 浏览 器 皆 未 支持 此 属性 。 


| 10-2 事件 属性 


当 用 户 浏览 网 页 时 会 触发 的 一 系列 动作 ，HTML 提供 了 这 些 触发 的 事件 名 称 ， 网 页 设计 师 可 以 


针对 此 事件 使 用 JavaScript 设计 一 段 脚本 (Script)。HTML 的 元 素 <script> 和 <noscript> 就 是 供 设 定 
事件 属性 使 用 。 下 列 是 事件 属性 的 类 别 。 


口 


窗口 事件 ( Window Event Attributes ) 


此 类 事件 属性 主要 用 在 <body> 元 素 ， 以 下 是 Window 事件 属性 名 称 。 
onafterprint : 文件 打印 后 所 触发 的 事件 。 
onbeforeprint : 文件 打印 前 所 触发 的 事件 。 
onbeforeunload : 文件 卸载 前 所 触发 的 事件 。 

onerror : 错误 发 生 时 所 触发 的 事件 。 

onhaschange : 文件 改变 时 所 触发 的 事件 。 

onload : 网 页 下 载 结束 所 触发 的 事件 。 

onmessage : 信息 被 触发 时 的 事件 。 

onoffline : 文件 脱 机 时 所 触发 的 事件 。 

ononline : 文件 联机 时 所 触发 的 事件 。 

onpagehide : 当 网 页 被 隐藏 时 所 触发 的 事件 。 
onpageshow : 当 网 页 可 见 时 所 触发 的 事件 。 
onpopstate : 当 窗 口 历史 记录 改变 时 所 触发 的 事件 。 
onresize : 当 浏览 器 窗口 大 小 被 更 改 时 所 触发 的 事件 。 
onstorage : 当 Web Storage 区 域 更 新 后 所 触发 的 事件 。 
onunload : 浏览 窗口 关闭 所 触发 的 事件 。 


窗 体 事件 ( Form Events Attributes ) 


此 类 事件 属性 几乎 所 有 的 HTML 元 素 皆 会 使 用 ， 但 是 较 常 在 <form> 元 素 内 看 到 。 
onblur : 元 素 失去 焦点 时 所 触发 的 事件 。 

onchange : 元 素 值 被 更 改 时 所 触发 的 事件 。 

oncontextmenu : 当下 拉 菜 单 命令 被 选择 时 所 触发 的 事件 。 

onfocus : 当 元 素 获得 焦点 时 所 触发 的 事件 

oninput : 当 元 素 获 得 输入 时 所 触发 的 事件 。 

oninvalid : 当 元 素 无 效 时 所 触发 的 事件 。 

onreset : 当 单 击 reset 按钮 时 所 触发 的 事件 。 

onselect : 当 元 素 本 文 被 选取 时 所 触发 的 事件 。 

onsubmit : 当 单 击 submit 按钮 后 送出 窗 体 时 所 触发 的 事件 。 
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口 “ 键 盘 事件 ( Keyboard Events Attributes ) 


onkeydown : 用 户 按键 盘 键 时 所 触发 的 事件 。 
onkeypress : 用 户 单 击 所 建 的 按钮 时 所 触发 的 事件 。 
onkeyup : 用 户 释放 键盘 按钮 时 所 触发 的 事件 。 


口 ”鼠标 事件 ( Mouse Events Attributes ) 


此 类 事件 属性 主要 是 由 鼠标 触动 元 素 引发 的 一 系列 事件 。 
onclick : 鼠标 单 击 某 元 素 时 所 触发 的 事件 。 

ondblclick : 鼠标 双击 某 元 素 时 所 触发 的 事件 。 
onmousedown : 元 素 被 鼠标 按 下 时 所 触发 的 事件 。 
onmousemove : 鼠标 指针 经 过 元 素 时 所 触发 的 事件 。 
onmouseout : 鼠标 指针 离开 元 素 时 所 触发 的 事件 。 
onmouseover : 鼠标 指针 经 过 元 素 时 所 触发 的 事件 。 
onmouseup : 在 某 元 素 处 放 开 鼠 标 按键 时 所 触发 的 事件 。 
onmousewheel : HTMLS5 不 建议 使 用 ， 请 改 用 onwheel。 
onwheel : 在 元 素 上 滚动 鼠标 滚轮 时 所 触发 的 事件 。 


口 “ 拖 电 事 件 ( Drag Events Attributes ) 


此 类 事件 是 由 鼠标 拖 忠 触动 元 素 引 发 的 一 系列 事件 。 
ondrag : 鼠标 拖 蝶 元 素 时 所 触发 的 事件 。 

ondragend : 鼠标 拖 电 元 素 操作 结束 时 ， 所 触发 的 事件 。 
ondragenter : 元 素 被 鼠标 拖 忠 到 有 效 区 域 时 所 触发 的 事件 。 
ondragleave 元 素 被 鼠标 拖 电离 开 有 效 区 域 时 所 触发 的 事件 。 
ondragover : 元 素 在 有 效 目 标 区 域 被 拖 电 时 所 触发 的 事件 。 
ondragstart : 在 拖 电 元 素 开 始 时 所 触发 的 事件 。 

ondrop : 元 素 在 拖 电 结 束 ， 被 放 开 时 所 触发 的 事件 。 
onscroll : 当 元 素 的 滚动 条 被 卷 动 时 所 触发 的 事件 。 


口 “” 草 贴 往事 件 (Clipboard Events Attributes) 


oncopy : 用 户 复制 元 素 内 容 时 所 触发 的 事件 。 
oncut : 用 户 剪 切 元 素 内 容 时 所 触发 的 事件 。 
onpaste : 用 户 贴 上 元 素 内 容 时 所 触发 的 事件 。 


口 ”媒体 事件 ( Media Events Attributes ) 


媒体 事件 属性 常用 在 <audio>、<embed>、<object> 和 <video> 元 素 中 。 

onabort : 媒体 文件 下 载 中 断 时 所 触发 的 事件 。 

oncanplay : 当 文件 可 以 播放 时 所 触发 的 事件 。 

oncanplaythrough : 当 媒 体 文件 可 以 不 考虑 缓冲 ， 可 持续 播放 到 结束 时 所 触发 的 事件 。 
oncuechange : 在 <track> 元 素 中 时 间 节 点 〈cue) 改变 时 所 触发 的 事件 。 
ondurationchange : 当 媒 体 文件 长 度 改变 时 所 触发 的 事件 。 
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onemptied : 当 发 生 故 障 媒 体 文件 无 法 执行 时 所 触发 的 事件 。 

onended : 当 媒 体 播 放 已 经 到 达 结束 时 所 触发 的 事件 ， 可 发 送 类 似 “ 感 谢 观赏 ”的 信息 。 

onerror : 在 媒体 下 载 阶段 发 生 错误 时 所 触发 的 事件 。 

onloadeddata : 当 媒 体 已 下 载 时 所 触发 的 事件 。 

onloadstart : 当 媒 体 要 开始 下 载 但 是 尚未 下 载 前 所 触发 的 事件 。 

onpause : 当 用 户 暂停 播放 媒体 时 所 触发 的 事件 。 

onplay : 当 已 经 准备 好 可 以 播放 媒体 时 所 触发 的 事件 。 

onplaying : 当 已 经 开始 播放 媒体 时 所 触发 的 事件 。 

onprogress : 当 浏 览 器 正在 获取 媒体 数据 时 所 触发 的 事件 。 

onratechange : 当 播放 速度 改变 时 ， 例 如 快 放 或 慢 放 时 所 触发 的 事件 。 

onseeking : 当 开 始 设 定 播放 位 置 时 所 触发 的 事件 。 

onseeked : 当 播 放 位 置 定 位 结束 且 seeking 属性 设 为 false 时 所 触发 的 事件 。 

onstalled : 当 仍 在 定位 播放 位 置 seeking 属性 设 为 tue 时 所 触发 的 事件 。 

onsuspend : 浏览 器 下 载 媒 体 数 据 中 断 时 所 触发 的 事件 。 

ontimeupdate : 当 播放 位 置 改变 时 所 触发 的 事件 。 

onvolumechange : 当 媒 体 播 放 音量 改变 时 所 触发 的 事件 。 

onwaiting : 当 媒 体 暂停 播放 因为 要 让 缓冲 存储 器 取得 更 多 媒体 数据 ， 将 来 仍 继续 播放 时 所 触发 
的 事件 。 


口 ” 其 他 事件 ( Misc Events Attributes ) 


onshow : 当 <menu> 元 素 所 建 的 菜单 被 显示 时 所 触发 的 事件 。 
ontoggle : 当 用 户 打 开 或 关闭 <details> 元 素 所 建 的 对 象 时 所 触发 的 事件 。 


认识 <script> 元 素 与 一 个 超 简单 的 JavaScript 应 用 


前 一 节 介绍 了 事件 属性 ， 一 直 卡 在 需要 JavaScript， 无 法 用 实例 做 解说 。 笔 者 将 在 本 书 第 三 篇 ， 
介绍 使 用 JavaScript， 同 时 讲解 更 多 与 网 页 设计 有 关 的 应 用 ， 在 此 决定 以 一 个 超 简 单 的 JavaScript 做 
实例 解说 。 

Script 的 中 文字 义 是 脚本 ，HTML 有 一 个 属性 <script>， 供 网 页 设计 师 设计 脚本 ， 所 以 
JavaScript 程序 代码 就 是 放 在 <script> 元 素 内 。 它 的 使 用 格式 如 下 : 


<script 属性 > 
script 语言 (Javascript) 


</script> 
<script> 元 素 的 属性 内 容 如 下 : 
oD type 


设 定 script 语言 的 MIME 类 型 ， 默 认 是 “texbjavascript?， 所 以 在 以 JavaScript 设计 网 页 时 可 以 
省 略 。 
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用 国 
如 果 是 由 外 部 汇 入 Script 文件 时 ， 就 需 配置 文件 的 URL。 


DO charset 


如 果 是 由 外 部 汇 入 Script 文件 时 ， 就 需 设 定 此 Script 文件 的 文字 编码 。 
程序 实例 ch10_8.html : 设 定 当 浏览 器 加 载 网 页 时 出 现 一 个 警告 窗口 ， 内 容 是 “Hi! JavaScript”。 


1 <!doctype html> 

2 <html> 

3 <head> Internet Explorer 已 经 限制 这 个 网 页 x 
4 <meta charset="utf-8"> A 

5 <title>ch19_8.html</title> 
6 <script> - 

7 
8 


function load() 
{ Hello! 
9 window.alert("Hi! JavaScript") 


11 </script> 
12 </head> 


13 <body onload="load()"> 然后 浏览 器 窗口 会 看 到 上 方 右 图 所 示 文 字 ， 


14 <p>Hello!</p> 
ee 屏幕 中 央 会 出 现下 图 所 示 的 警告 窗口 。 
| 


以 下 执行 时 会 需要 先 单 击 “ 允 FW 
许 被 封锁 的 内 容 ” 按 钮 。 


[rT 


本 例 中 ， 当 网 页 加 载 时 会 触发 onload 事件 ， 程 序 13 行 设 定 执行 load0 函数 ， 这 是 一 个 
JavaScript 程序 ， 位 于 第 7 行 至 第 10 行 ， 在 <head> 元 素 的 子 元 素 <script> 内 。load0 函数 执行 时 调 
用 window.alert() 函数 。window.alert() 这 个 函数 用 于 显示 警告 窗口 ， 同 时 输出 第 9 行 设 定 的 文字 ， 只 
要 单 击 确定 按钮 ， 窗 口 就 会 关闭 。 

有 时 设计 网 页 时 可 能 不 知道 客户 端的 浏览 器 是 否 支持 <script> 元 素 ， 此 时 可 以 使 用 <noscript> 
元 素 ， 这 个 元 素 的 功能 是 ， 当 浏览 器 不 支持 <script> 元 素 时 ， 可 以 执行 另 一 个 动作 。 
程序 实例 ch10_9.html : 重新 设计 前 一 程序 ， 当 浏览 器 不 支持 <script> 元 素 时 ， 列 出 客户 端 浏览 器 
不 支持 script 的 信息 。 


ei 由 于 笔者 计算 机 支持 <script>， 
3 <head> 所 以 执行 结果 与 前 一 程序 相同 。 


4 <meta charset="utf-8"> 

所 <title>ch1ie 9.html</title> 
6 <script> 

7 function load() 

8 


{ 
9 alert("Hil Javascript") 


11 </script> 

12 </head> 

13 <body onload="l0ad()"> 

14 <noscript> 

15 <p> 浏 览 器 不 支持 script</p> 
16 </noscript> 

17 <p>Hello!l</p> 

18 </body> 

19 </html> 
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和 站 设 定 一 般 区 块 <div> 元 素 


这 个 元 素 虽 然 在 语意 上 并 不 具有 特别 的 意义 ， 但 是 却 在 网 页 编排 时 常常 会 使 用 ， 用 于 将 一 些 元 
素 群 组 化 。 此 外 ， 这 个 元 素 在 使 用 时 ， 常 需 搭 配 class 和 id 属性 并 套用 在 CSS 样式 表 内 。 本 节 笔 者 
先 介绍 此 元 素 的 基本 用 法 ， 将 来 还 会 有 更 多 更 完整 的 应 用 。 
程序 实例 ch10_10.html : 简单 <div> 元 素 的 应 用 ， 这 个 程序 主要 是 利用 <div> 元 素 将 Big Data 
Series 和 Web Design Series 分 别 群 组 化 。 


1 <!doctype html> 21 </ol> 

2 <html> 22 </div> 

3 <head> 23 </ol> 

4 <meta charset="utf-8"> 24 </body> 

5 <title>ch10_10.html</title> 25 </html> 

6 </head> 

7 <body> 2 二 

8 <hl>Siticon Stone Education</hl> 执行 结果 

9 <div> 

19 <h3>Big Data Series</h3> 从 
11 <ob Silicon Stone Education 
12 <li>Big Data Knowledge Today</li> 

13 <li>R Language Today</li> Big Data Series 

14 «ob 1. Big Data Knowiedge Today 

15 </div> 2. RLanguage Today 

ei ‘Web Design Series 

17 <h3>Web Design Series</h3> 

18 <ol> | v 
19 <li>HTMLS</li> 

20 <li>CSs3</\li> 


10-5 设 定 一 般 范 围 <span> 元 素 


这 个 元 素 与 <div> 元 素 一 样 在 语意 上 并 不 具有 特别 的 意义 ， 但 是 却 在 网 页 编排 时 常常 会 使 
用 ， 用 于 将 一 些 段落 内 的 内 容 与 其 他 内 容 区 隔 ， 但 是 如 果 未 使 用 CSS 做 进一步 处 理 ， 外 表 看 不 出 
有 何 差异 。 此 外 ， 这 个 元 素 在 使 用 时 ， 常 需 搭配 class 和 id 属性 并 套用 在 CSS 样式 表 内 。 这 是 一 
个 行内 层级 (inline level) 的 元 素 ， 本 节 笔 者 先 介绍 此 元 素 的 基本 用 法 ， 下 一 节 还 会 有 更 完整 的 应 


用 说 明 。 
程序 实例 ch10_11.html : <span> 元 素 的 基本 应 用 。 本 程序 基本 是 修改 了 ch3_7.html， 增 加 了 
<span> 元 素 ， 程 序 执行 结果 与 ch3_7.html 相同 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

机 <title>ch1e 11.html</title> 

6 </head> 

7 <body> 

8 <h1> 月 下 独 酌 </h1> 

9 <p> 花 间 一 过 酒 ， 独 酌 无 双亲 ;<span> 举 本 邀 明 月 </span>， 对 影 成 三 人 。 </p> 
10 <hr> 

11 “hl1> 静 夜 思 </h1y 

12 <p> 床 前 明月 光 ， 疑 是 地 上 霜 。<span> 举 头 刻 明月 </span>， 低 头 思 故乡 :</p> 
13 </body> 

14 </html> 


HTML5+CSS3 王者 归来 


区 块 层 级 与 行内 层级 


所 谓 的 区 块 层 级 (Block Level) 是 指 此 区 块 的 数据 在 浏览 页 面 时 ， 会 由 新 的 一 行 开 始 放置 。 例 
如 ， 下 列 左 图 是 原 网 页 版 面具 有 区 块 1 的 画面 ， 当 放置 区 块 层 级 的 内 容 区 块 2 时， 它们 彼此 位 置 可 
参考 下 方 右 图 。 


我 们 所 学 的 <div>、<hn>、<p> 和 <pre> 元 素 皆 属 于 区 块 层级 元 素 ， 这 些 元 素 所 产生 的 区 块 又 称 
Block Box。 
程序 实例 ch10_12.html : 更 进一步 认识 区 块 层级 。 读 者 可 以 看 到 由 于 各 区 块 皆 占 据 整 行 空间 ， 所 
以 要 用 新 的 一 行 放置 新 的 区 块 。 


1 xldoctype htmly Z 二 4 士 

2 xhtmly 执行 结果 

3 <head> 

4 <meta charset="Utf-8"> 


5 ctitle>ch1e 12.html<¢/title> 

6 dhead> 区 块 层级 (Block Level 1) a 
7 <body> 

8 《py 区 块 层 级 [Block Level 1)</p> 区 块 层级 (Block Level 2) 

9 《py 区 块 层级 [Block Level 2)</p> 

19 <p> 区 块 层级 (Block Level 3)</p> 区 块 层级 (Block Level 3) v 


11 <¢/body> 
12 </html> 


所 谓 的 行内 层级 (inline Level) 是 指 此 区 块 的 数据 在 浏览 页 面 中 不 会 由 新 的 一 行 开始 放置 。 例 
如 ， 下 列 左 图 是 原 网 页 版 面 只 有 区 块 1 的 画面 ， 当 放置 行内 层级 的 内 容 区 块 2 时 ， 它 们 彼此 的 位 置 
可 参考 下 方 右 图 。 


区 块 2 


我 们 所 学 的 <a>、<img> 和 <span> 元 素 皆 属 于 行内 层级 元 素 ， 而 这 些 元 素 所 产生 的 区 块 又 称 
Inline Box。 
程序 实例 ch10_13.html : 更 进一步 认识 行内 层级 ， 读 者 可 以 看 到 各 区 块 逐一 往 右 排列 。 


1 <ldoctype html> 4 二 和 疆 
Sn 执行 结果 
3 <head> 
4 <meta charset="utf-8"> 行内 层级 (inlineLevel 1) 行内 层级 (inline Level 2) 行内 层级 (inline Level 3) 
5 <title>ch18 13.html</title> 


6 </head> 
7 <body> 


8 <span> 行 内 层级 (inline Level 1)</span> 
9 <span> 行 内 层级 (inline Level 2)</span> 
19 <span> 行 内 层级 (inline Level 3)</span> 
11 </body> 
12 </html> 
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dw 


本 章 是 介绍 HTML 的 最 后 一 章 ， 各 位 读者 应 该 对 使 用 HTML 设计 网 页 有 相当 的 认识 了 。 本 节 
的 主题 是 网 页 布局 ， 下 图 是 一 个 很 典型 的 网 页 布局 。 


<div id="header”> | 


<divid="nav”> 


E ;<divid="section”> 


¢ 二 | 
Ef <divid="aside”> 
?<divid="artice”> 
1 最 


| <div id= "footer"> 


过 去 要 设计 这 类 的 网 页 ， 基 本 语法 如 下 : 

<body> 

<div id="header"> ... </div> 

<div id="nav"> 。。</div> 

<div id="section"> ... </div> 

<div id="articte"> ... </div> 

<div id="aside"> ... </div> 

<div id="footer"> ... </div> 
</body> 


上 述 id 属性 的 标记 可 由 网 页 设计 师 自行 命名 ， 如 果 用 与 架构 无 关 的 命名 方式 ， 它 最 大 的 缺点 是 
一 个 网 页 存在 太 多 的 id， 每 个 网 页 设计 师 可 能 对 个 网 页 区 块 的 id 命名 有 不 同 的 喜好 ， 促 使 其 他 人 阅 
读 有 困难 。 另 外 ， 当 网 页 区 块 一 多 时 ， 可 能 设计 师 本身 也 会 忘记 。 此 外 ， 网 络 搜索 引擎 在 搜寻 判断 
关键 词 时 ， 也 会 增加 判别 的 困扰 。 

HTMLS5 的 发 表 一 个 重要 里 程 碑 是 ， 赋 予 每 个 网 页 区 块 语意 名 称 的 元 素 ， 只 要 依照 语意 设计 网 
页 ， 将 来 不 仅 自己 可 以 很 快 记 起 当初 如 何 规划 设计 网 页 ， 他 人 也 可 以 很 容易 地 阅读 此 网 页 的 设计 模 
式 。 当 然 ， 网 络 搜索 引擎 也 容易 判读 关键 词 。 如 果 使 用 HIML5 规划 设计 ， 整 个 程序 代码 结构 将 如 
下 所 示 : 


<body> 
<header> ,.. </header> 
<nav> 。。，</nav> 
<section> ... </section> 
<article> .,. </article> 


<aside> ,,. </aside> 
<footer> ... </footer> 
</body> 


上 述 结构 相当 于 为 每 一 个 网 页 区 块 丝 赋予 一 个 语意 上 的 名 称 ， 每 个 名 称 均 有 适合 的 元 素 ， 整 个 
网 页 布局 图 形 架构 将 如 下 所 示 : 


Te | 


| | <aside> 


HTML5+CSS3 王者 归来 


在 本 书 第 3 章 笔 者 已 经 概略 地 解说 <header>、<section> 和 <footer> 元 素 使 用 的 语意 了 ， 本 节 将 
针对 其 他 语意 做 完整 解说 。 


10-7-1 <header> 元 素 与 群 组 化 标题 


设计 网 页 时 ， 有 时 会 有 多 个 标题 在 同一 区 块 。 标 题 数据 在 HTML 内 隐藏 着 章节 的 概念 ， 如 果 
发 现 多 个 标题 同时 出 现 ， 但 是 彼此 并 没有 形成 章节 关系 时 ， 可 以 将 这 些 标 题 群 组 化 。 标 题 经 群 组 化 
后 ， 只 有 最 高 层级 的 标题 才 会 显示 为 章节 标题 的 一 部 分 ， 也 就 是 被 视 为 大 纲 层级 的 标题 ， 其 他 标题 
则 会 被 忽略 。 群 组 化 使 用 的 元 素 是 <hgroup>， 使 用 格式 如 下 : 

<hgroup> … </hgroup> 

常 发 生 的 应 用 在 页 首 区 (header)， 往 往 同时 有 多 个 标题 ， 例 如 大 标题 、 中 标题 或 小 标题 ， 我 们 
可 以 将 这 些 标题 群 组 化 。 
程序 实例 ch10_14.html : 将 标题 群 组 化 。 

1 <ldoctype html> 执行 结果 


2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


ee 深 石 数字 科技 


7 <body> 
8 <header> ~ - 
i 深度 学 习 滴水 穿 厂 
10 <h1> 深 石 数字 科技 </h1> 

11 <h3> 深 度 学 习 滴 水 穿 石 </h3> 
12 </hgroup> 

13 </header> 

14 </body> 

15 </html> 


10-7-2 <nav> 元 素 应 用 实例 


这 个 元 素 的 主要 功能 是 建立 网 站 导航 超 链 接 区 块 ， 用 以 导 览 到 其 他 网 页 或 是 网 页 的 其 他 区 
域 。 导 航 超 链 接 区 块 一 般 放 到 网 页 上 方 、 标 题 栏 下 方 ， 有 时 候 也 可 以 放 在 左 或 右边 栏 。 若 是 有 页 
尾 〈footer) 的 导航 栏 ， 例 如 公司 客服 、 版 权 声明 、 返 回首 页 等 的 超 链接 区 块 则 放 在 footer 区 块 较 


为 适合 。 
程序 实例 ch10_15.html : 网 站 导 览 超 链接 的 实例 。 

1 <ldoctype htmly 和 和 疆 a 
:2 本 例 的 执行 结果 如 下 图 所 示 ， 单 
4 et charset="utf-8"> 击 超 链接 可 进入 各 主题 区 。 

5 <titleych16 15.html</title> 

a 

SR 深 石 数字 科技 

0 

a 深度 学 习 滴 水 穿 石 

en 和 际 认证 书籍 出 版 JobEExanm 


15 <p> 
16 <a href="http: //www ,Siliconstone,com"> 国 际 认证 </a>&nbsp;&nbsp; 
27 ca href="http: /www. grandtech,info"> 书 籍 出 版 :/a>&nbsp;&nbsp; 
18 <a href="http: /sm jobexam. ty” >JobExam</a> 

19 /p> 

20 </nav> 

21 </body> 

22 </html> 
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10-7-3 <article> 元 素 应 用 实例 


这 个 元 素 用 于 放置 独立 、 完 整 且 只 有 一 页 的 内 容 ， 可 以 是 一 个 布告 栏 贴 文 、 一 篇 文章 。 

有 时 候 可 以 将 <article> 内 容 放 入 <section> 元 素 内 ， 也 可 以 将 <section> 内 容 放 入 <article> 元 素 
内 ， 其 实 没 有 固定 规则 ， 完 全 视 实际 内 容 而 定 。 
程序 实例 ch10_16.html : 重新 设计 前 一 个 程序 实例 ch10_15.html， 增 加 了 <section> 和 <article> 元 


素 以 及 相关 内 容 。 

1 <ldoctype htnl> 39 <hl>HTML5+C553 王者 归来 </hl> 

2 xhtml> 3 <pyHTML 可 以 设计 网 页 内 容 与 结构 ，css 风 是 设计 网 页 排版 与 外 观 。x/py 
3 <head> 32 c/article> 

4 <meta chanset="utf-8"> 33 </section> 

5 <title>ch10_16.html¢/title> 34 </body> 

6 </head> 35 /html> 


7 <bodyy 


B <headery 
Ss 执行 结果 
19 《<h1> 深 石 数字 科技 </h1> 


11 《ha> 深 度 学 习 清水 字 石 <c/h3y 


12 </hgroup> 

13 cjheadery 深 石 数字 科技 

14 <nav> 

15 <p> 

16 <a href="http: /mm siliconstone con" 国际 认证 (/a>&nbsp;&nbsp; NR 

17 a href="http: /wgrandtech infe" > 书 蒜 出 版 </a>&nbspj&nbsp3 国际 认证 书 镑 出 版 JabExam 

18 <a href="http: /war, jobexan. tu">JobExan¢/a> 

19 /p> 最 新 出 版 公告 

29 </nav> 

21 csection> i 

22 。 “hly 最 新 出 版 公告 </hly 育 商 近 疝 BEData 之 四 

23 。 <articley 现在 是 Big Data 时 代 ， 若 起 进入 这 个 领域 ， 有 请 言 可 说 是 最 重要 的 程序 语言 ， 学 
24 <h1>R 言 这 向 8ig Data 之 路 </hi> 习 本 书本 需要 有 统计 基础， 们 是 在 无 形 中 本 书 已 冯 灌输 了 统计 知识 给 你 。 
25 <p> 现 在 是 8ig Data 时 代 ， 若 想 进 入 这 个 领域 ，R 语 言 可 说 是 最 重要 的 

26 程序 语言 ， 学 习 本 书 不 需要 有 统计 基础 ， 但 是 在 无 形 中 本 书 已 经 HTMLS+CSS3 王者 归来 

4 宣 答 了 梳 计 各 褒 你，</P> HTML 可 以 设计 网 页 内容 与 结构 ，CcSS 则 是 没 计 网 页 排 上 与 外 观 。 

23 </articley 

29 <article> 


细心 的 读者 可 能 会 留意 到 ， 第 10 行 、 第 22 行 、 第 24 行 与 第 30 行 笔者 皆 使 用 <hl> 元 素 当 标 
题 ， 可 是 画面 看 起 来 却 好 像 是 不 同 级 别 的 标题 ， 这 牵涉 到 HTML 章节 与 大 纲 的 概念 ， 将 在 10-8 
节 解 说 。 


10-7-4 “aside> 元 素 应 用 实例 


这 个 元 素 通常 用 于 放置 与 主要 版 面 内 容 关联 性 比较 弱 的 内 容 ， 甚 至 若是 将 此 内 容 拿 掉 也 不 影响 
整体 页 面 内 容 的 完整 性 ， 这 个 文件 区 块 通常 可 以 放 到 侧 边栏 。 网 页 设计 时 在 此 区 块 可 以 放置 一 般 新 
闻 的 补充 说 明 、 前 导 文 、 图 片 或 是 广告 信息 。 


程序 实例 ch10_17.html : 重新 设计 ch10_16.html， 但 是 增加 <aside> 元 素 字段 。 本 范例 在 此 字段 放 
上 笔者 所 著 的 了 语言 书籍 封面 ， 下 列 只 列 出 相 较 上 一 程序 增加 的 <aside> 区 块 内 容 。 


34 <aside> 执行 结果 
35 <img src="RBook. jpg" width="109"> 


36 </aside> 深 石 数位 科技 
二 请 本 
ha aa aaea 
最 新 出 版 公告 


HTML5+CSS3 王者 归来 


可 能 各 位 读 省 会 奇怪 ，HTML 所 设计 的 网 页 太 单 调 了 ， 其 实 ， 更 多 精彩 的 版 面 就 交 给 下 一 篇 的 


主题 CSS 吧 ! 
下 要 汪 HTML 章节 的 概念 


过 去 若是 处 理 的 网 页 文件 与 章节 标题 有 关 ， 
可 以 使 用 <h1> ~ <h6> 标题 ， 由 标题 编号 可 以 了 
解 各 章节 的 层次 。 但 是 当 使 用 CSS 进行 版 面 美 
化 时 ， 由 于 是 使 用 <div> 元 素 切 割 版 面 ， 往 往 会 
让 整 份 文件 变 得 复杂 。 下 列 是 过 去 处 理 一 份 单纯 
文件 网 页 章节 标题 的 方法 。 


</head> 

<body> 
<h1>HTML+CSS3 王 者 归来 </h1> 
<h2> 第 1 章 HTML 的 历史 </h1> 
<h3>1-1 认识 HTML</h1> 


<p>HTML 的 英文 全 名 是 </p> 

<h2> 第 2 章 </h1> 

</body> 

上 述 文件 想 表达 的 章节 标题 的 层次 概念 如 下 : 

HTML+CSS3 干 者 归来 
第 1 章 HTML 的 历史 
11 认识 HTML 
HTML 的 英文 全 名 是 
第 2 章 


由 于 现在 有 了 <nav><section><article> 
和 <aside> 元 素 ， 就 可 以 明确 地 区 分 主题 ， 在 


HTML 规则 书 内 强烈 建议 网 页 设计 师 在 设计 网 
页 时 只 使 用 <hl> 标题 。 依 照 HTML 的 规则 书 ， 
上 述 程序 片段 的 写法 应 该 如 下 所 示 : 


<body> 
<h1>HTML+CSS3 王 者 归来 </h1> 
<section> 
<hl> 第 1 章 HTML 的 历史 </h1> 
<article> 
<h1>1-1 认识 HTML</h1> 
<p>HTML 的 英文 全 名 是 </p> 
</article> 
</section> 
<section> 
<h1> 第 2 章 </h1> 
<section> 
</body> 


最 外 层 的 标题 “HTML5+CSS3 王者 归来 ” 
仍 是 hl 标题 ，<section> 元素 内 的 标题 “第 1 章 
HTML 的 历史 ”程序 虽 是 注 明 hl 标题 ， 但 将 自动 
降 一 级 为 以 h2 标题 显示 。<article> 元 素 在 上 述 实 
例 中 是 <section> 的 子 元 素 ， 所 以 标题 “1-1 认识 
HIML” 虽 然 也 是 注 明 hl 标题 ， 也 将 比 <section> 
再 降 一 级 以 h3 标题 显示 。 


计数 :和 日 期 与 时 间 <time> 元 素 


这 个 元 素 用 于 设 定 搜索 引擎 与 机 器 可 阅读 的 时 间 与 日 期 格式 。 有 了 这 个 显示 日 期 与 时 间 的 元 


素 ， 标 注 的 日 期 与 时 间 数 据 将 被 搜索 引擎 加 入 到 它 的 搜寻 列表 内 ， 另 外 也 可 以 用 此 元 素 标记 重要 日 
期 。 它 的 使 用 格式 如 下 : 

<time datetime="YYYY-MM-DDThh:mm:ssTZD"> … </time> 

YYYY : 公元 MM : 月 份 DD : 日 期 T : 分 隔 符 

hh : 时 mm : 分 ss : 秒 


TZD : 时 区 ，Z 是 表示 格林 威 治 时 间 ， 用 在 北京 需 加 8 小 时 “+08:00” 


下 列 是 实例 : 
datetime="18:20" 


datetime="18:20:30" 


表示 18 点 20 分 
表示 18 点 20 分 30 秒 
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datetime="2018-06" 表示 2018 年 6 月 
datetime="2018-06-20" 表示 2018 年 6 月 20 日 


datetime="2018-06-20T18:20:30" 

表示 格林 威 治 时 间 2018 年 6 月 20 日 18 点 20 分 30 秒 的 方法 是 : 

datetime=2018-06-20T18:20:30+08:00 

北京 时 间 与 格林 威 治 时 间 相差 8 小 时 ， 上 例 表述 的 是 北京 时 间 2018 年 6 月 20 日 18 点 20 分 30 秒 。 
程序 实例 ch10_18.html : <time> 元 素 的 基本 应 用 。 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch19_18.html</title> 
</head> 
<body> 
<p> 本 门市 营业 时 间 <time>11:88</time></p> 
<p> 我 在 <time datetime="2929-12-25T19:38+88:69"> 圣 诈 节 </time> 晚 上 有 一 个 约会 </p> 
16 </body> 
11 </html> 


加 NmwNP 


o 


本 门市 营业 时 间 11:00 
我 在 圣诞 节 晚上 有 一 个 约会 


< 国 > 


习题 
1. 请 以 目前 所 学 的 知识 设计 一 个 以 自己 为 主题 的 网 页 ， 内 容 可 自行 发 挥 。 
2. 请 以 目前 所 学 的 知识 ， 任 选 下 列 一 个 主题 ， 设 计 一 个 网 页 。 

餐饮 业 IC 设计 业 销售 汽车 业 百货 公司 自 创 设计 工作 室 


CSS3 的 基础 知识 
段落 文字 的 编排 知识 
将 CSS 应 用 在 项 目 列表 
设计 背景 

完整 学 习 Box Model 

将 CSS 应 用 在 表格 数据 
设计 渐变 效果 
设计 多 栏 版 面 

定位 与 网 页 排版 

使 用 弹性 容器 (flexible container ) 排版 
动画 设计 一 一 过 渡 效 果 

设计 网 页 动画 

变形 动画 

响应 式 (RWD) 网 页 设计 


CSS3 的 基础 知识 


本 章 摘要 

11-1 CSS 基本 语法 
11-2 CSS 颜色 设 定 
11-3 套用 CSS 的 方法 
11-4 class 选择 器 
11-5 字体 

11-6 id 选择 器 
11-7 ”属性 选择 器 
11-8 ”全 局 选择 器 
11-9 ”虚拟 选择 器 
11-10 ”前 缀 词 的 使 用 


font-family 


Welcome font-family - Times New Roman 字 体 优先 


Welcome fontfamily - Arial 字 体 优先 闸 


W3C 协会 所 发 表 的 HTML5 与 CSS3 的 基本 精神 是 将 网 页 内 容 与 结构 交 由 HTML5 处 
理 ， 网 页 排版 与 设计 则 交 由 CSS3 处 理 。 其 实 我 们 也 可 以 将 CSS 视 为 一 种 专门 处 理 网 页 排版 与 
设计 的 语言 。 从 本 章 起 ， 将 一 步 一 步 引 导 各 位 读者 学 习 使 用 CSS3 处 理 网 页 的 排版 与 设计 。 
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EE] CSS 基本 语法 


CSS 的 全 名 是 Cascading Style Sheet， 通 常 中 文 也 可 以 简称 层 叙 样式 表 ， 主 要 功能 是 处 理 HTML 
文件 排版 与 设计 。 


11-1-1 CSS 基本 语法 格式 
CSS 的 基本 语法 格式 如 下 : 


selector { propertyl:value; proterty2:value; } 


口 selector 
中 文 称 选择 器 ， 主 要 是 指 样式 表 要 套用 的 对 象 。 
OD declaration block 


在 大 括号 内 的 区 块 称 为 声明 区 块 ， 在 HTML 中 每 个 元 素 需 搭配 属性 (attribute) 与 值 (value)， 
在 CSS 中 每 个 选择 器 则 需 搭 配 property (也 可 以 翻译 为 属性 ) 与 值 (value)。 每 组 声明 属性 
(property) 与 值 (value) 之 间 以 “:” 符 号 分 隔 ， 结 束 后 建议 加 上 “:;” 符 号 。 在 声明 区 块 内 允许 有 
多 个 声明 存在 ， 彼 此 需 用 “;” 符 号 隔 开 ， 这 些 声明 可 以 放 在 同一 行 ， 也 可 以 分 行 撰写 。 例 如 : 

P { color:blue; text-align:center; } 

与 下 列表 达 方 式 意义 相同 。 


pi 
color:blue; 
text-align:center; 


} 


11-1-2 多 个 选择 器 使 用 相同 的 声明 区 块 


如 果 有 多 个 选择 器 使 用 相同 的 声明 区 块 ， 可 以 用 “,” 符 号 隔 开 选 择 器 。 如 果 有 下 列 3 个 CSS 声 
明 如 下 : 


hl { color:blue; text-align:center; } 
h2 { color:blue; text-align:center; } 
h3 { color:blue; text-align:center; } 


可 写成 下 列 方式 : 


hl, h2, h3 { color:blue; text-align:center; } 


11-1-3 CSS 的 批注 


所 谓 的 批注 是 HTML 浏览 器 不 会 处 理 的 部 分 ， 这 部 分 的 内 容 主要 是 供 程序 设计 师 自己 或 其 他 程 
序 设 计 师 阅读 方便 。“/*” 与 “%/” 之 间 的 区 域 缘 是 批注 。 
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hl { ”/* 设 定 hl 标题 为 蓝 色 与 居中 对 齐 */ 


color:blue; text-align:center; 


| 11-2 | CSS 颜色 设 定 


其 实 所 有 颜色 可 以 使 用 3 个 原色 red (红色 )、green (绿色 ) 和 blue〈 蓝 色 )， 每 个 颜色 数值 在 0-255 
范围 内 ， 本 书 附 录 E 有 完整 的 网 页 设计 色彩 表 可 参考 。 设 计 网 页 时 最 常用 的 颜色 设 定 方法 有 4 种 。 

1. 使 用 颜色 名 称 

直接 以 英文 名 称 设 定 颜色 ， 例 如 red 是 红色 、green 是 绿色 。HTML 浏览 器 对 英文 颜色 名 称 大 小 
写 不 是 敏感 的 ， 所 以 Red 与 red 皆 可 以 表示 红色 。 

2. 使 用 rgb(red, green, blue) 函数 

这 个 函数 包含 了 3 个 颜色 参数 red (红色 )、green (绿色 ) 和 blue ( 蓝 色 )， 每 个 参数 值 在 0-255 间 。 

rgb 《0,0,0) 代表 黑色 。 

rgb (127,127,127) 代表 灰色 。 当 颜色 的 3 种 颜色 值 相同 时 会 产生 深浅 不 一 的 灰色 。 

rgb 《255,255,255) 代表 白色 。 

不 同 的 red、green 和 blue 颜色 值 ， 可 以 组 合成 各 式 颜 色 。 

3. 使 用 16 进位 数值 表示 色彩 

这 种 表达 方式 前 方 会 有 “#” 符 号 ， 基 本 格式 是 “#RRGGBB” 例 如“#ff0000” 表 示 红 色 ， 
“#00ff00” 表 示 绿 色 ,“#0000ff” 表 示 蓝 色 。 同 样 ， 英 文字 母 大 小 写 也 不 敏感 ， 例 如 ,“#Hfft0000” 与 
“#FF0000” 的 意义 相同 。 

实例 1 : 下 列 代码 为 设 定 颜色 是 绿色 的 3 种 方式 。 


Color:green7 
color:rgb(0,255,0); 
Color:"#00ff00"7 


4.rgba(red, green, blue, alpha) 函数 


它 是 rgb0 函数 的 扩充 ， 增 加 了 第 4 个 参数 alpha。 这 个 函数 代表 透明 度 ， 值 在 0.0〈 完 全 透明 ) 
至 1.0〈 完 全 不 透明 ) 间 。 


11-2-1 1600 万 种 颜色 


由 于 每 个 颜色 值 的 范围 是 0-255， 所 以 256 (Red) X256 (Green) X256 (Blue) 等 于 16777216， 这 
相当 于 可 得 到 1600 多 万 种 颜色 。 


11-2-2 网 络 安 全 颜色 一 一 256 种 颜色 
很 早 以 前 ， 彩 色 屏 幕 显示 器 只 能 支持 256 种 颜色 ， 现 在 几乎 所 有 彩色 屏幕 显示 器 皆 可 支持 几 
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百 万 种 以 上 的 颜色 。 当 时 设计 网 页 时 ， 为 了 能 安全 地 在 所 有 浏览 器 上 显示 ， 设 计 师 会 尽量 使 用 这 
256 种 颜色 ， 所 以 这 些 颜 色 又 称 网 络 安全 颜色 ， 如 下 图 所 示 。 


0000FF 


0033FF 


006699 0066FF 


336699 


6600FF 


6633FF 


666699 6666FF 


FF0033 066 0 FFOOCC FFOOFF 


FF3333 FF3366 FF3399 FF33CC FF33FF 


FF6633 FF6666 FF6699 FF66CC FF66FF 


FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF 


11-2-3 HSL 颜色 


HSL 指 的 是 色调 (Hue)、 饱 和 度 (Saturation) 和 亮度 (Lightness)， 在 使 用 时 可 以 使 用 以 下 函数 ， 


hsu (hue， saturation, lightness) 


hue : 值 从 0 至 360。0 或 360 是 红色 ，120 是 绿色 ，240 是 蓝 色 。 
saturation : 这 是 百分比 值 ，100% 是 全 彩 ，0% 是 灰色 。 
lightness : 这 也 是 百分比 值 ，100% 是 白色 ，0% 是 黑色 。 
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| 11-3 | 套用 CSS 的 方法 


基本 上 有 3 种 套用 CSS 样式 表 的 方法 。 
1. 行内 样式 (Inline Styles ) 
这 种 方法 是 直接 将 style 视 为 该 元 素 的 属性 ， 然 后 设 定 属性 值 。 不 过 建议 这 种 方法 最 好 少 用 ， 因 


为 会 违背 将 HTML 文件 内 容 与 排版 设计 分 开 的 目的 。 
程序 实例 ch11_1.html : 设计 hl 标题 颜色 是 蓝 


色 ， 同 时 居中 对 齐 。 光 避 再 这 个 实例 最 大 的 特色 是 不 论 窗口 
le 有 多 宽 ，hl 标题 字 均 居中 对 齐 。 
<htm 
3 <head> 
4 <meta charset="utf-8"> HTML $+CSS3 
5 <title>chll_ 1.html</title> 
6 </head> 
7 <body> 
8 <hl style="color:blue; text-align:center;">HTML 5+CSS3</h1> 
He HTML S+CSS3 


10 </html> 
上 述 实例 使 用 了 text-align 属性 ， 这 个 属性 可 以 设 定 文字 对 齐 方式 ，center 是 指 文字 居中 对 齐 ， 
不 论 窗 口 宽度 如 何 ， 文 字 均 会 居中 对 齐 。 
2. 内 部 样式 表 ( Internal Style Sheet ) 
如 果 样 式 表 只 用 在 一 份 HTML 文件 上 ， 那 么 就 将 这 个 样式 表 以 内 部 样式 表 的 形式 写 在 HTML 
文件 内 吧 ! 在 写 的 时 候 是 将 样式 表单 写 在 <head> 元 素 内 。 
程序 实例 ch11_2.html : 以 内 部 样式 表单 方式 重新 设计 程序 实例 chl1_1.html。 
a TE 车 与 chll_lhtml 相同 。 上 述 程序 
<head> 第 6 ~ 8 行 是 设 定 样式 表单 ， 相 当 于 将 <hl> 元 
et 素 原本 格式 做 编辑 ， 修 改 成 以 蓝 色 显示 、 居 中 对 


<title>ch11 2.html</title> 


Sty 齐 ， 所 以 第 11 行 可 以 显示 出 结果 。 本 书 大 部 分 
hl { color:blue; text-align:center; } 


</style> 程序 皆 使 用 这 种 方式 设计 


</head> 
10 <body> 
11 <h1>HTML5+CSS3</h1> 
12 </body> 
13 </html> 


3. 外 部 样式 表 ( External Style Sheet ) 

外 部 样式 表 通 常 是 用 一 份 样式 表 供 许多 HTML 文件 使 用 的 场合 ， 这 个 时 候 只 要 更 改 一 个 样式 
表 ， 许 多 相关 连 的 网 页 就 会 随 之 更 动 。 外 部 样式 表 文 件 的 扩展 名 是 “.css”， 需 要 使 用 <link> 元 素 设 定 
HTML 文件 与 样式 表 的 关联 ， 这 个 <link> 元 素 需 放 在 <head> 元 素 内 。 它 的 几 个 必要 属性 意义 如 下 : 


口 “rel : 指定 文件 与 此 样式 表 文件 的 关系 ， 请 设 为 “stylesheet”。 
口 type : 配置 文件 的 MIME 类 型 ，HTML5 可 以 省 略 。 
口 “href : 指定 外 部 样式 表 文 件 的 URL。 


va 


- 
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程序 实例 ch11_3.html : 以 外 部 样式 表 重 新 设计 chl1l_1.html， 外 部 样式 表 名 称 是 mystyle.css。 


1 <ldoctype hinl> mystyle.css 文件 内 容 如 下 ， 请 留意 最 左边 的 
2 <html> 
3 <head> 1， 是 行 号 不 是 外 部 样式 表 的 内 容 。 
沁 <meta charset="utf-8"> 1 hl { color:blue; text-align:center; } 
5 <title>ch11_3.html</title> 
6 <link rel="stylesheet" href="mystyle.css"> 二 
7 </head> 执行 结果 与 chll_1.html 相同 。 
8 <body> 
9 <hl>HTML 5+CSS3</h1> 
19 </body> 
11 </html> 
此 外 ， 也 可 以 使 用 “@import url (URL)” 将 外 部 样式 表单 汇 入 ， 这 个 “@import” 应 该 写 在 
<style> 元 素 内 。 
程序 实例 ch11_4.html : 用 “@import” 重 新 设计 chl1_3.html。 
1 <!doctype html> 9 </head> 
2 <html> 19 <body> 
3 <head> 11 <h1>HTML5+CSS3</h1> 
4 ‘<meta charset="utf-8"> 12 </body> 
5 <title>ch11_4.html</title> 13 </html> 
6 <style> 
( le.css); 3 
站 EE 和 车 与 chll 3.html 相同。 


11-4 class 选择 器 


在 设计 网 页 时 ， 有 了 时候 一 个 相同 的 元 素 出 ” 则 只 有 当 该 HTML 元 素 class 属性 值 是 classname 
现在 两 个 地 方 ， 在 位 置 A 的 地 方 想 用 A 格式 装 ”时 才 可 以 套用 该 属性 设 定 ， 可 参考 程序 实例 
饰 ， 在 位 置 B 的 地 方 想 用 B 格式 装饰 ， 这 时 就 ”chll_5.html 至 chll 9html。 如 果 style 的 元 素 名 称 
可 以 使 用 class 选择 器 。 此 时 可 以 将 A 取 一 个 是 “*” 则 当 所 有 HIML 元 素 内 class 属性 值 是 
classname 名 称 ，B 取 另 一 个 classname 名 称 。 它 。 classname 时 才 可 以 套用 该 属性 ， 可 参考 chll_11. 


的 style 用 法 是 : html。 所 以 声明 格式 将 如 下 : 
元 素 名 称 .classname { *.classname { 
} } 
相对 应 <body> 内 的 HTML 元 素 写法 是 : 上 述 声明 也 可 以 省 略 ”* ”， 改 成 下 列 所 示 : 
< 元素 名 称 class="classname"> .classname { 


如 果 style 内 的 元 素 名 称 是 一 个 HTML 元 素 ， 
} 


11- 上 


font 的 作用 是 设 定 网 页 显示 的 字体 ， 可 以 设 定 下 列 相 关 属 性 : font-family、font-size、font- 
style、font-variant、font-weight。 另 外 本 节 也 将 介绍 font-size-adjust 和 @font-face 功能 。 
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11-5-1 设置 字体 名 称 的 font-family 属性 


字体 名 称 font-family 的 使 用 格式 如 下 : 

font-family: 字体 名 称 1，… ， 字体 名 称 n; 

如 果 要 指定 多 个 名 称 ， 则 中 间 以 逗号 “,” 隔 开 。 原 则 上 写 在 前 面 的 字体 有 优先 级 ， 当 浏览 器 找 
不 到 前 面 的 字体 时 会 往 后 找寻 ， 如 果 一 直 找 不 到 则 使 用 默认 字体 。 如 果 字 体 名 称 超过 两 个 英文 字 单 
词 ， 例 如 Times New Roman， 使 用 时 需 用 双 引 号 括 起 来 ， 即 “Times New Roman”。 如 果 字 体 名 称 是 
一 个 英文 单词 ， 例 如 Arial， 使 用 时 可 以 省 略 双 引 号 ， 即 Arial。 
程序 实例 ch11_5.html : 这 个 程序 设 定 两 个 段落 ， 分 别 是 第 17 行 和 18 行 ， 其 中 “class=font1l” 的 
段落 使 用 程序 第 7 一 9 行 的 样式 ,“class=font2” 的 段落 使 用 程序 第 10 ~ 12 行 的 样式 。 程 序 第 8 行 
“Arial” 字 体 名 称 有 双 引 号 ， 第 11 行 的 字体 名 称 笔 者 故意 不 加 双 引 号 ， 其 实 皆 可 被 浏览 器 接受 。 


1 <ldoctype html> 
2 <html> 


3 <head> es 
士 
4 <meta charset="utf-8"> 执行 结果 


5 <title>ch11_5.html</title> 

6 <style> 

7 p.font1 { 八 
8 font-family: "Times New Roman", "Arial”; font-family 辣 
9 } 

16 p.font2 { | 

11 font-family:Arial, “Times New Roman"; Welcome fontfamily - Times New Roman 字 体 优先 

12 } 

13 -</style> Welcome font:family - Arial 字 体 优 先 Y 
14 </head> 

15 <body> 


16 <hi>font-family</h1> 
17 xp class="font1">Welcome font:family - Times New Roman 字 体 优先 </p> 
18 <p class="font2">Welcome font:family - Arial 字 体 优先 </p> 

19 </body> 

28 </html> 


11-5-2 设置 字号 的 font-size 属性 


font-size 可 以 设 定 字 号 ， 有 3 种 长 度 设 定 方式 ， 可 以 参考 附录 D。W3C 建议 设 定 的 方式 使 用 
em，lem 是 16px。 
程序 实例 ch11_6.html : font-size 的 应 用 。 这 个 程序 将 标题 1 (Heading 1) 使 用 默认 大 小 并 以 30px 
方式 输出 ， 然 后 将 段落 字号 以 默认 大 小 、24px、1.5em 和 默认 大 小 的 80% 输出 。 


1 <!ldoctype html> 17 font-size: 80%; 
2 <html> 18 } 
3 <head> 19 </style> 
4 <meta charset="utf-8"> 28 «</head> 
5 <title>ch11 6.html</title> 21 <body> 
6 <style> 22 <h1l>Heading 1 默认 字体 大 小 /h1> 
当 hl.hsize { 23 <hl class="hsize">Heading 1 字体 大 小 是 36px</h1> 
8 font-size: 30px; 24 <p>paragraph 默 认 字 体 大 小 </p> 
和 25 xp class="size1">paragraph 字 体 大 小 是 24px</p> 
peayedt. 26 xp class="size2">paragraph 字 体 大 小 是 1.5em</p> 
font-size:24px; 27 <p class="size3">paragraph 字 体 大 小 是 86%</p> 
} 28 </body> 
a 29 </html> 
font-size:1.5em; 
} 


p.size3 { 
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CSS 也 允许 使 用 下 列 方式 设 定 字号 : 
Heading 1 默认 字体 大 小 ~ medium : 这 是 默认 值 。 
Heading 1 字体 大 小 是 30px small : 设 为 小 字号 。 
paragraph 村 认 字体 大 小 x-small : 设 为 较 小 字号 。 
Paragraph 字 体 大 小 是 24px xx-small ; 设 为 更 小 字号 。 


paragraph 字 体 大 小 是 1.5em 


pageh 二 大 小 是 0% ~ 


larger : 设 为 大 字号 。 
x-large : 设 为 较 大 字号 。 
xx-large : 设 为 更 大 字号 。 


11-5-3 设置 字体 样式 的 font-style 属性 


font-style 可 以 设 定 3 种 样式 的 字体 ， 分 别 是 normal 正常 (这 是 默认 字体 样式 )、italic 斜体 和 
oblique 倾斜 体 〈 没 有 那么 斜 ， 有 时 看 不 太 出 来 与 italic 的 区 别 )。 
程序 实例 ch11_7.html : font-style 的 应 用 。 这 个 程序 会 列 出 默认 样式 、italic 和 oblique 字体 样式 。 


1 <ldoctype html> 19 <p>paragraph 默 认 字体 样式 </p> 

2 <html> 28 <p class="normal">paragraph 字 体 是 normal</p> 
3 <head> 21 <p class="italic">paragraph 字 体 是 italic</p> 
4 <meta charset="utf-8"> 22 <p class="oblique">paragraph 字 体 是 oblique</p> 
5 <title>ch11_7.html</title> 23 </body> 

6 <style> 24 </html> 

7 p-normal { 

HE . font-style:normal; 执行 结 

16 p.italic { ， 

11 font-style:italic; paragraph 默 认 字体 样式 

12 } paragraph 宇 体 是 normal 

13 p-.oblique { paragraph 字 体 是 jialic 

14 font-style:oblique; 

15 } paragraph 闻 体 是 oblique 

16 </style> 

17 </head> 

18 <body> 


11-5-4 ”设置 字体 样式 的 font-weight 属性 


在 一 般 文本 编辑 器 中 ， 粗 体 (bold) 和 斜体 (italic〉 放 在 一 起 讨论 ， 但 是 在 CSS 中 则 使 用 不 同 
的 属性 来 设 定 ， 粗 体 是 使 用 font-weight 来 设 定 。 可 以 设 定 下 列 值 : 


font-weight: normal | bold | bolder | lighter | 100 - 900 


DD normal D lighter 
默认 值 ， 正 常 粗细 。 表示 更 细 的 字体 。 

口 bold 口 100, 200, 300, 400, 500, 600, 
表示 粗 体 字 。 700, 800,，900 

口 bolder 这 些 数值 定义 字体 由 细 到 粗 400 是 


表示 更 粗 的 字体 normal，700 是 bold。 


HTML5+CSS3 王者 归来 


程序 实例 ch11_8.html : font-weight 的 应 用 ， 这 个 程序 将 以 默认 和 粗 体 显 示 字 符 串 。 
1 <ldoctype html> 14 <p class="bold">bold: 深 度 学 习 滴 水 穿 石 </p> 


2 <html> 15 </body> 
3 <head> 16 </html> 


4 <meta charset="utf-8"> 


5 <title>ch11 8.html</title> 村 
= = 疆 
6 <style> 执行 结果 
Ys 
8 


pP.bold { 


font-weight:bold; normal: 滩 度 学 习 滴 水 僵 石 
9 } 
bold: 深 度 学 习 滴 水 穿 石 
16 </style> 六 
11 </head> 
12 <body> 


13 <p>normal: 深 度 学 习 滴 水 穿 石 </p> 


11-5-5 font-variant 
font-variant 的 默认 值 是 normal， 若 将 font-variant 设 定 为 small-caps， 可 以 设 定 小 写 英文 字母 为 


小 型 大 写字 母 。 
程序 实例 ch11_9.html : font-variant 的 应 用 。 这 个 程序 将 以 默认 字体 和 小 写 英文 字母 以 小 型 大 写字 
母 显示 。 
1 <!doctype html> 13 <p>normal:My name is Jiin-Kwei Hung</p> 
2 <html> 14 <p class="small">small-caps:My name is Jiin-Kwei Hung</p> 
3 <head> 15 </body> 
16 </html> 


<meta charset="utf-8"> 
<title>ch11_9.html</title> 


4 

5 

6 <style> 二 

7 p.small { 执行 结果 
8 


font~variant: small-caps; 


9 S 

10 </style> nonmal:-My name is Jiin-Kwei Hung a 
11 </head> SMALLCAPSMY NAME IS JIN-KWEIHUNG 总 
12 <body> 


11-5-6 font-size-adjust 


font-size-adjust 属性 用 于 设 定 字体 宽度 和 高 度 的 比率 ， 一 般 用 在 当 屏幕 显示 的 字符 非 第 一 顺 位 字 
符 时 ， 调 整 其 他 顺序 字符 的 长 宽 比 ， 这 样 整 体 字符 显示 不 会 有 太 大 的 差异 。 默 认 情况 下 几 个 重要 字体 
Times New Romam、George、Comic Sans MS 和 Verdana 的 宽 高 比分 别 是 0.46、0.5、0.54 和 0.58。 
程序 实例 ch11_10.html : 测试 font-size-adjust 属性 。 本 程序 将 列 出 两 个 字符 串 ， 第 一 个 字符 串 使 
用 “Times New Roman” 字 体 ，16px 大 小 ， 第 二 个 字符 串 原 先是 使 用 “Times New Roman” 字 体 最 
优先 ， 此 处 故意 写 错字 体 ， 所 以 改 用 第 二 种 字体 “Verdana”， 字 号 是 16px。 由 于 正 浏览 器 目前 不 支 
持 font-size-adjust 属性 ， 所 以 将 看 到 两 行 字 不 协调 的 结果 。 


1 <!doctype html> 12 font-family:"Times New Rommm", Verdana; 
2 <html> 如 font-size:16px; 
3 <head> 14 font-size-adjust:0.46; 

<meta charset="utf-8"> 15 } 


<title>ch11_10.html</title> 16 </style> 


<style> 17 </head> 
p.font1 { 18 <body> 
font-family:"Times New Roman”, Verdana; 19 <p class="font1">Welcome font:family - HTML5+CSS3</p> 
font-size:16px; 20 <p class="font2">Welcome font:family - HTML5+CSS3</p> 
} 21 </body> 


p.font2 { 22 </html> 
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右 方 左 图 是 焉 浏览 器 的 输出 ，。 过 调整 的 Verdana 字体 输出 ， 两 行 数据 看 起 来 比 
由 于 下 目前 不 支持 font-size-adjust 属性 ， 所 以 较 协调 。 

第 二 行 的 输出 是 使 用 没有 font-size-adjust 调整 的 | 本 
Verdana 字体 。 右 方 右 图 是 使 用 Firefox 浏览 器 经 Welcome font:famlly - HTMLS+CSS3 。 walcome font:family -HTMLS+Css3 上 


11-5-7 font 
这 是 前 几 小 节 属性 设 定 的 简易 表示 法 ， 使 用 时 可 以 依 序 设 定 下 列 属性 值 : 


font-style font-variant font-weight font-size font-family 

如 果 省 略 某 些 值 ， 则 使 用 它 的 默认 值 。 使 用 时 各 个 属性 值 之 间 以 空格 隔 开 ， 但 是 如 果 某 个 属性 
值 有 两 个 或 更 多 设 定 值 ， 例 如 font-family， 则 这 些 值 之 间 以 逗号 隔 开 ， 可 参考 程序 实例 ch11_11.html 
的 第 7 行 。 
程序 实例 ch11_11.html : 以 font 属性 重新 设计 chl1_10.html。 


1 <!doctype html> 12 </style> 


2 <html> 13 </head> 

3 <head> 14 <body> 

4 <meta charset="utf-8"> 15 <p class="font1">Welcome font:family -~ HTML5+CSS3</p> 
5 <title>ch11_11.html</title> 16 <p class="font2">Welcome font:family ~ HTML5+CSS3</p> 
6 <style> 17 </body> 

7 p.font1 { font:16px "Times New Roman”, Verdana; } 18 </html> 

8 p.font2 { 

9 font:16px "Times New Rommm", Verdana; = 

10 font-size-adjust:0.46; FE 二 与 chll 10.html 相同 。 

11 } 


11-5-8 @font-face 


过 去 浏览 网 页 只 能 使 用 浏览 器 提供 的 字体 ，HTML5 的 @font-face 功能 可 提供 服务 器 端的 字体 
供 浏览 器 下 载 ， 所 以 用 户 在 浏览 器 上 可 以 看 到 原 属于 服务 器 的 字体 。 它 的 使 用 格式 如 下 ; 


@font-face { 
font-family: 字体 名 称 和 
src: 字体 名 称 的 URL ”format ( 字体 格式 ) 


*.classname { 
font-family: 字体 名 称 ;7 

} 

经 上 述 调用 后 ， 将 来 只 要 HTML 元 素 的 class 属性 是 classname 皆 可 以 使 用 服务 器 端的 字体 名 称 。 


不 过 在 使 用 时 要 注意 版 权 问题 ， 因 为 一 般 购买 的 字体 ， 不 保证 可 以 在 网 络 上 流通 使 用 。 


11-5-9 ”综合 应 用 
程序 实例 ch11_12.html : class 选择 器 的 另 一 个 应 用 。 这 个 程序 的 重点 是 ， 所 有 HTML 元 素 内 class 
属性 的 值 是 mystyle， 执 行 时 字 以 蓝 色 和 斜体 显示 。 
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16 “<p> 深 度 学 习 滴水 穿 石 </py> 


1 <ldoctype html> 
2 <html> 17 <p class="mystyle"> 深 度 学 习 渍 水 穿 石 </p> 
3 <head> 18 </body> 


4 <meta charset="utf-8"> 19 </html> 


<title>ch11 12.html</title> 


到 

6 <style> ss 

7 *.mystyle { 执行 结果 
8 


color:blue; 


9 font-style:italic; 入 
19 } Heading 1 

11 «</style> 

12 </head> Heading 1 

13 <body> 深度 池 习 注水 奔 石 

14 <hl>Heading 1¢/h1> i 加 


15 <xhl class="mystyle">Heading 1¢/h1> 
上 述 程序 最 大 的 特色 是 第 7 行 的 “*.mystyle”“*” 是 通配符 ， 相 当 于 所 有 属性 class 值 为 
mystyle 的 HTML 元 素 皆 套用 这 个 样式 〈style)。 


Es 


id 选择 器 与 class 选择 器 内 涵 基本 是 相同 的 ， 最 大 的 区 别 是 id 属性 值 应 该 是 具有 唯一 特性 的 识 


别 码 。 
#id { 


} 
假设 我 们 需要 指定 这 个 #d 应 用 在 哪 一 个 元 素 ， 可 以 在 其 前 面 加 上 元 素 名 称 。 


元 素 名 称 #id { 


} 
程序 实例 ch11_13.html : 以 id 选择 器 重新 设计 ch11_7.html。 


16 -</style> 
17 </head> 
18 <body> 
19 《p>paragraph 默 认 字体 样式 </p> 


28 <p id="normal">paragraph 字 笨 是 normal</p> 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 


5 <title>ch11 13.html</title> 
6 <style> 21 xp id="italic">paragraph 字 和 体 是 italic</p> 
#normal { 22 <p id="oblique">paragraph 字 体 是 oblique</p> 
8 font-style:normal; 23 </body> 
9 } 24 </html> 
19 #italic { 
11 font-style:italic; I 
es pm 
=" 了 本 这 个 程序 的 执行 结果 与 call 7. 
13 #oblique { 
14 font-style:oblique; html 相同 。 
15 和 


11-7 | 属性 选择 器 


属性 选择 器 用 于 将 具有 某 种 属性 上 且 不 论 其 值 为 何 的 所 有 元 素 均 套 用 指定 样式 ， 它 的 使 用 格式 如 下 : 


*[classname] { 
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其 中 “*” 也 可 以 省 略 。 
程序 实例 ch11_14.html : 这 个 程序 是 将 凡 属 性 有 class 的 元 素 ， 不 管 class 值 为 何 ， 标 题 栏 和 项 目 
列表 第 1、2 行 的 输出 均 以 蓝 色 显示 。 


1 <ldoctype html> 16 ”<li class="location"> 北 极 海 (/1i> 
2 <html> 17 ”<li> 中 国 西藏 v/1iy 

3 <head> 18 《1D 蒙古 </li> 

4 <meta charset="utf-8"> 19 </ul> 

5 <title>ch11 14.html</title> 28 </body> 

6 <style> 21 </html> 

7 [class] { 

8 color:blue; 

9 } Z 

10 /style> sl 我 的 旅游 经 历 
11 </head> 页 了 大 陆 

12 <body> 3 yy 

13 <hl class="My Trip"> 我 的 旅游 经 历 </h1> 证 

14 <ul> 


15 <li class="location") 南 极 大 陆 ¢/1i> 


上 述 程 序 第 7 行 如 果 增 加 “*” 如 下 所 示 ， 也 可 以 得 到 相同 结果 ， 可 参考 ch11_14_1.html。 


7 *[class] { 
8 color:blue; 
9 4 


此 外 样式 也 可 以 限定 套用 在 某 个 特定 属性 值 。 
程序 实例 ch11_15.html : 只 有 class 属性 值 是 “location”， 才 可 以 套用 样式 。 


1 <ldoctype html> 18 ”<1i> 中 国 西藏 (/1i> 

2 <html> 19 <li> 蒙古 /1i> 

3 <head> 26 </ul> 

4 <meta charset="utf-8"> 21 </body> 

筷 <title>ch11 15.html</title> 22 </html> 

6 <styley 

7 [class="location"] { 

8 color:blue; 4 二 Z 士 

-ne EE 于 我 的 旅游 经 历 
16 </style> 

11 </head> 作者 : 洪 锦 魁 
12 <body> 有 机关 了 
13 <hl class="My Trip"> 我 的 旅游 经 历 </h1> 2 
14 <h2 class="location"> 作 者 : 洪 锦 魁 </h1> EE 


15 <ul> 
16 《<li class="location") 南 极 大 陆 </1i> 
17 《li class="location"> 北 极 海 </1iy> 


上 述 执行 结果 限定 了 class 属性 值 是 “location” 时 才 套 用 样式 表 。 当 然 CSS 也 允许 再 加 上 符合 
某 一 元 素 的 class 属性 值 才 套用 样式 。 
程序 实例 ch11_16.html : 这 个 程序 重新 设计 chll_15.html， 但 是 需 是 <li> 元 素 才 可 套用 。 


<ldoctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>ch11 16.html</title> 
<style> 

li[class="location"] { 
color:blue; 


CE 


9 } 
10 </style> 

11 </head> 

12 <body> 

13 <hl class="My Trip"> 我 的 旅游 经 历 </h1> 
14 <h2 class="location"> 作 者 : 洪 锦 魁 </hi> 
15 <ul> 

16 《<li class="location"; 南 极 大 陆 </1i> 
17 <li class="location"> 北 极 海 (/1i> 


18 <1i 冲 国 西藏 </1i> 
19 <1i> 蒙 古 </1i> 

28 </ul> 

21 </body> 

22 </html> 


IEEE 下 我 的 旅游 经 历 
作者 : 洪 锦 魁 
。 南极 大 陆 


。 北 要 海 
* 中 国 西 藏 
。 蒙古 
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11-8 医 三 


所 谓 的 全 局 选择 器 是 将 样式 套用 在 所 有 元 素 ， 它 的 写法 如 下 : 


et 

} 
口 sh J 时 
程序 实例 ch11_17.html : 将 样式 套用 在 所 有 元 素 ， 所 以 所 有 输出 内 容 皆 是 蓝 色 字 。 
1 <!doctype html> 18 <li) 中 国 西藏 </1i> 
2 <html> 19 《li 蒙古 </1i> 
3 <head> 20 </ul> 
4 <meta charset="utf-8"> 21 </body> 
<title>ch11 17.html</title> 22 </html> 
6 <style> 
F . 
8 -olor: blu 十 | 
9 
bas Les | 我 的 旅游 经 历 
11 </head> | 
12 <body> 作者 : 洪 锦 鬼 
13 <hl class="My Trip"> 我 的 旅游 经 历 </h1> a 
14 xh2 class="location"> 作 者 : 洪 锦 抽 6/hl> We 
15 <ul> 中 国 网 区 
16 <li class="location") 南 极 大 陆 (/1i> 得 十 


17 li class="location")> 北 极 海 </1i> 


| 11-9 | 虚拟 选择 器 


之 前 介绍 的 所 有 样式 皆 是 应 用 在 HTML 的 元 素 或 属性 上 ， 虚 拟 类 别 选 择 器 则 是 将 样式 套用 在 元 
素 内 容 的 状态 上 。 


11-9-1 链接 的 虚拟 类 别 :link 和 :visited 


对 于 超 链接 字符 串 而 言 ， 最 常见 的 两 种 状态 是 尚未 被 单 击 和 已 经 被 单 击 。 

:link : 尚未 被 单 击 时 可 以 套用 样式 。 

:visited : 已 经 被 单 击 时 可 以 套用 样式 。 

虚拟 类 别 使 用 上 的 特色 是 “:” 加 上 虚拟 类 别名 称 ， 上 述 两 个 链接 的 虚拟 类 别 需 搭配 <a> 元 素 使 用 。 
程序 实例 ch11_18.html : 设计 网 页 时 默认 是 尚未 访问 过 的 超 链 接 字 符 串 以 蓝 色 显示 ， 已 经 访问 过 的 
以 紫色 显示 ， 这 个 程序 会 将 尚未 访问 过 的 超 链 接 字 符 串 以 绿色 显示 ， 已 经 访问 过 的 以 黄色 显示 。 


1 <ldoctype htnl> 17 </p> 


2 <html> 18 </body> 
3 <head> 19 </html> 
4 emeta charset="utf-8"> 


<title>ychi1_18.htmlc/title> 


Se 下 方 左 图 是 尚未 访问 过 的 超 链 


:Breenj 
axvisited { color:yellow; } 


接 ， 右 图 是 已 经 访问 过 的 超 链接 。 


到 5 数 字 A | 三 ES 
. 


Silicon Stcee Fdocation 
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11-9-2 动作 虚拟 类 别 


:hover : 当 鼠 标 指针 位 于 超 链接 字符 串 或 在 此 元 素 上 时 可 以 套用 样式 。 

:active : 单 击 时 可 以 套用 样式 。 

:focus : 获得 焦点 时 可 以 套用 样式 。 

样式 表 在 执行 时 是 有 顺序 的 ， 越 下 方 的 指令 越 有 较 高 优先 级 ， 所 以 “:hover” 需 放 在 “:link” 和 
“:visited” 后 面 ， 否 则 会 看 不 到 。 
程序 实例 ch11_19.html : 重新 设计 ch11_18.html， 使 得 鼠标 指针 移 至 超 链接 字符 串 时 ， 字 符 串 以 红 
色 显 示 ， 同 时 字符 大 小 是 2em。 单 击 超 链接 字符 串 时 若 不 放 开 鼠 标 按键 ， 字 符 串 将 改 以 黑色 显示 。 


1 <ldoctype htmly 18 。 <a href="http: ">Silicon Stone Education¢/a> 
2 <html> 19 </p> 

3 <head> 28 </body> 

4 <meta charset="utf-8"> 21 </html> 


<titlezch11_19.htmlc/title> 
<style> 


: a:link { color:green; } 下 方 左 图 是 鼠标 指针 在 字符 串 上 


en { sleep Te } l 
9 ; :red; font-size:2em; 区 一 

方 时 的 效果 ， 右 图 是 按 着 鼠标 不 放 时 的 效果 。 
11 </styley 

12 </head> J 

13 i 和 pn 

14 <p> Silicon Stene Education Silicpn Stone Education 
15 <a href-"http: /ww deepstone .com,tw") 深 石 数 字 </a> FE onecony) 

16 </p> 

17 <py 


程序 实例 ch11_20.html : 这 个 程序 重新 设计 了 ch9_3.html， 使 得 窗 体 中 只 要 有 一 个 窗 体 组 件 获得 
焦点 ， 此 组 件 的 背景 色 就 会 出 现 黄色 。 这 个 程序 使 用 了 尚未 说 明 的 属性 background-color， 该 属性 可 
以 设 定 背景 颜色 。 

eS 下 方 左 图 是 文字 框 未 获得 焦点 时 
ee 的 效果 ， 右 图 是 文字 框 获得 焦点 时 显示 黄色 底 色 


5 <titleych11_29.html</titley 

6 <style> 的 效果 。 

7 input:focus { background-color:yellow; } 

8 </style> , 

9 cheady 请 输入 会 员 数 据 请 输入 会 员 数 据 


10 <body> 


11 <form action="cgi-bin/get.exe" method="get"> 姓名 CE | 
12 <h1> 请 输入 会 员 数 据 </h1> 4 
ES 地 址 : 地 址 3 ] 
13 <p> 姓名 :<input type="text" nane="user” size="5"></p> = 
14 <p> 地 址 :<input type="text" name="addr"></p> 确认 取消 | 驻 认 | 阳 消 | 


15 <p><input type="submit”value=" 确 认 "> 
16 <input type="reset”value=" 取 消 "></p> 
17 </form> 
18 <¢/body> 
19 </html> 


11-9-3 目标 虚拟 类 别 


:target 可 以 为 移动 的 目标 套用 样式 。 
程序 实例 ch11_21.html : 这 个 程序 执行 时 ， 单 击 上 方 超 链接 ， 下 方 移动 目标 将 自动 套用 样式 ， 也 
就 是 黄色 的 底 色 。 


1 <ldoctype html> 19 <body> 

2 <html> 11 xp?<a href="#info1") 进 和 Big Datac/a></p> 

3 <head> 12 <py<a href="#info2"y 进 入 Data Analyst</a></p> 
4 <meta charset="utf-8"> 13 <h2> 请 单 击 上 述 内 容 凸 显 下 列 标题 </h2> 

5 <title>ch11 21.html¢/title> 14 <p id="infol">Big Data 内 容 </p> 

6 <style> 15 xp id-"info2">Data Analyst 内 容 </py 

7 :target { background-color:yellow; } 15 </body> 

B «</style> 17 </html> 

9 </head> 


HTML5+CSS3 王者 归来 


单 击 超 链 接 时 ， 下 方 目标 将 被 套用 样式 ， 如 下 方 右 图 所 示 。 


BAB pats | EABis Dat 

则 入 Data Analys! 进入 Data anaivsl 

请 单 击 上 述 内 容 凸 显 下 列 标题 | 请 单 击 上 述 内 容 凸 显 下 列 标题 
Big Data 内 容 BDa 容 


Data Analvst 内 容 Data Analyst 内 容 
Fley//D/HTMLS + CSS3/ch1 1/eh11_20 hemisinioi) | File///D/HTMLS + CSS3/ch1 /ch11_20 nimininiol 


11-10| 前 缀 词 的 使 用 


W3C 在 发 表 推荐 CSS 新 版 前 ， 会 经 过 草案 (Draft)、 候 选 〈Candidate) 阶段 ， 与 此 同时 一 些 浏 
览 器 开发 公司 或 协会 也 同步 展开 开发 这 些 属性 的 语法 ， 然 后 将 这 些 开发 阶段 的 属性 应 用 在 自身 的 浏 
览 器 内 。 如 果 所 设计 的 网 页 想 要 使 用 开发 阶段 的 属性 时 ， 必 须 在 属性 前 方 加 上 前 级 词 。 下 列 是 主要 
浏览 器 需 添加 的 前 级 词 。 

Internet Explorer : -ms 一 

Google Chrome : -webkit- 

Safari : -webkit— 

Firefox : -moz— 


Opera : -oO- 

当然 ， 浏 览 器 开发 商 在 测试 完成 后 ， 前 缀 词 就 不 需要 了 ， 所 以 有 时 候 我 们 在 开发 网 页 程序 时 ， 
可 以 在 加 上 前 缀 词 后 的 语法 后 面 再 加 上 没有 前 级 词 的 语法 。 

实例 1 : 前 级 词 的 应 用 ， 下 列 是 对 象 做 3D 动画 含 前 级 词 的 语法 。 


#ex { 
background-color:yellow; 
—webkit-transform:perspective(300px) rotatex(30deg); 
-ms-transform:perspective (300px) rotatex(30deg); 
-moz-transform:perspective(300px) rotateXx(30deg); 
-o-transform:perspective(300px) rotatex(30deg); 
transform:perspective(300px) rotateXx(30deg); 

} 


习题 

1. 请 重新 设计 第 4 章 习题 1， 增 加 本 章 所 述 的 色彩 功能 。 
2. 请 重新 设计 第 4 章 习 题 2， 增 加 本 章 所 述 的 色彩 功能 。 
3. 请 重新 设计 第 7 章 习题 6， 增 加 本 章 所 述 的 色彩 功能 。 
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本 章 摘要 


12=1 
12=2 
12=3 
12-4 
人 2=5 
12=6 
12=7 
12=8 
ea 
12-10 
12=11 
12=-12 
12~13 


设置 文字 对 齐 方 式 的 text-align 属性 
设置 首 行 缩 排 的 text-indent 属性 
设 定 行 高 的 line-height 属性 
设置 字母 间距 的 letter-spacing 属性 
设置 文字 间距 的 word-spacing 属性 
处 理 空格 符 的 white-space 属性 
大 小 写 转 换 的 text-transform 属性 
设置 文字 阴影 的 text-shadow 属性 
设置 线条 装饰 的 text-decoration 属性 
再 谈 线条 装饰 
设 定制 表 符 宽度 的 tab-size 属性 
设 定 换行 的 word-wrap 属性 
设 定 文字 超出 范围 的 text-overflow 属性 


HTML5+CSS3 王者 归来 


设置 文字 对 齐 方式 的 text-align 属性 


这 个 属性 的 使 用 格式 如 下 : 


text-align: left | right | center | justify | initial | inherit7 


口 left 口 justify 
靠 左 对 齐 。 左右 对 齐 。 
OD right OD initial 
靠 右 对 齐 。 使 用 默认 设置 (可 适用 于 本 章 其 他 章节 )。 
OD center OD inherit 
居中 对 齐 。 继承 父 元 素 对 齐 方式 (可 适用 于 本 章 其 他 章节 )。 
程序 实例 ch12_1.html : text-align 的 应 用 。 ai 
1 <ldoctype html> 23 </body> 
2 <html> 24 </html> 
3 <head> 
4 <meta charset="utf-8"> je 
5 <title>ch12_1.html</title> EEE 千 世 :对 ”建议 读者 调整 窗口 宽度 ， 
6 <styl 
3 以 体会 整体 效果 。 
3 #dateinfo { text-align:right; } 
9 #content { text-align; justify; } 
19 #signature { text-align: left; } 我 的 旅游 经 历 
11 </style> 
12 </head> Am 
13 <body> 2 i orthemn Li 独自 坐 习 
14 hz 我 的 六 游 经 历 Jh1> re she 二 和 人生 人 全 和 相国 的 co Hit 3 
ete Oceanl 


) ， 第 一 在 冰 
上 其 风 者 ， 皇 度 类 败 。2007 午 2 


汉 id="dateinfo">Aug, 2018</p> 假 村 人 
6 《<p id="content">2086 年 2 月 为 了 享受 边 泡 温泉 边 看 极光 (Northern Light)， 月 再 度 前 往 ， 这 次 举 飞 机 直达 阿拉 斯 加 最 北城 市 ， 终 于 抵达 北 模 海 。 
一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 圈 的 a 


18 Chena Hot Springs 温 泉 渡 假 村 。 旅 游 期 间 尝 试 开车 直达 北极 海 (Arctic Ocean) 
19 ， 第 一 次 车 子 在 冰天雪地 打滑 ， 撞 山 辟 失败 而 返 。 第 二 次 磁 上 暴风 雪 ， 再 度 失 
28 败 。2897 年 2 月 再 度 前 往 ， 这 次 坐 飞机 直达 阿拉 斯 加 最 北城 市 ， 终 于 抵达 北极 海 。 


有 下 设置 首 行 缩 排 的 text-indent 属性 


这 个 属性 的 使 用 格式 如 下 : 

text-indent: length | % | initial | inherit; 
口 length 

可 以 使 用 cm、px、pt、em 等 单位 来 设 定 固定 长 度 ， 默 认 值 是 0。 
DD % 

缩 排 父 元 素 宽度 的 百分比 。 


序 实例 ch12_2.html : 重新 设计 ch12_1.html， 设 定 首 行 缩 排 32px。 


313 
14 
15 
16 
17 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch12 2.htnl</title> 
<style> 
hl { text-align:center; } 
#content { text-align:justify; text-indent:32px; } 
</style> 
</head> 
<body> 
<h1> 我 的 旅游 经 历 </h1> 


<p id="content">2966 年 2 月 为 了 享受 边 息 温泉 边 看 极光 (Northern Light)， 
一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 略 的 

chena Hot Springs 温 泉 渡 假 村 。 旅 游 期 间 尝 试 开车 直达 北极 海 (Arctic ocean) 
， 第 一 次 车 子 在 冰天雪地 打滑 ， 挤 山 壁 失败 而 返 。 第 二 次 焉 上 暴风 雪 ， 再 度 失 
败 ，29e7 年 2 月 再 度 前 往 ， 这 次 淮 飞机 直达 阿拉 斯 加 最 北城 市 ， 终 于 抵达 北极 海 。 
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18 </p> 
19 </body> 
29 </html> 


我 的 旅游 经 历 


边 泡 温泉 边 看 极 ore LighD), 


2006 年 2 月 为 了 人 独自 华 飞 机 


| 12-3 | 设 定 行 高 的 line-height 属性 


OOO DO 


程序 实例 ch12_3.html ; 


行 高 的 定义 如 下 : 
Line-Height ， 
Line-Height ™* 


这 个 属性 的 使 用 格式 如 下 : 


line-height: normal | 


默认 值 ， 用 于 设置 合理 的 行 高 。 


number | length 


normal : 


number : 设 定数 值 ， 此 数值 会 与 目前 字体 尺寸 相 乘 来 设置 行 


多 


| inherit; 


了 间距 。 


length : 设 定 固定 的 行 间 距 ， 单 位 可 以 是 cm、px、pt 等 。 


% : 设置 依 目前 字体 尺寸 的 百分比 。 


方式 是 默认 方式 ， 第 2、3 种 使 用 number 方式 ， 第 4、 
之 间 的 差异 。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch12_3.html</title> 
<style> 
#number1 { line-height:1; } 
#number2 { line-height:3; } 
#length1 { line-height:29px; } 
#length2 { line-height:3epx; } 
</style> 
</head> 
<body> 
<p>2886 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 (Northern Light)， 
一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska) ， 再 开车 往 北 至 接近 北极 围 的 
Chena Hot Springs 温 泉 滨 假 村 。 旅 游 期 间 尝 试 开 车 直达 北极 海 (Arctic Ocean) 
， 第 一 次 车 子 在 冰天雪地 打滑 ， 撞 山 壁 失败 而 返 。 
</p> 
<p id="number1">2086 年 2 月 为 了 享受 边 泡 温泉 边 看 极光 (Morthern Light)， 
一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska) ， 再 开车 往 北 至 接近 北极 圈 的 


line-height 的 应 用 。 这 个 程序 主要 是 将 一 段 文字 用 5 种 行 高 显示 ， 第 1 种 


5 种 使 用 length 方式 ， 读 者 可 以 自行 比较 它们 


Chena Hot Springs 温 泉 滤 假 村 。 旅 游 期 间 尝试 开车 直达 北 根 海 (Arctic Ocean) 
， 第 一 次 车 子 在 冰天雪地 打滑 ， 撞 山 壁 失败 而 返 。 

</p> 

<p id="number2">2886 年 2 月 为 了 享受 边 泡 温泉 边 看 极光 (Northern Light)， 
一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 圈 的 

Chena Hot Springs 温 泉 渡 假 村 。 旅 游 期 间 尝试 开车 直达 北极 海 (Arctic Ocean) 
， 第 一 次 车 子 在 冰天雪地 打滑 ， 撞 山 壁 失败 而 返 。 

</p> 

<p id="length1">2886 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 (Northern Light)， 
一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 图 的 

Chena Hot_Springs 温 泉 渡 假 村 。 旅 游 期 间 尝 试 开车 直达 北极 海 (Arctic ocean) 
， 第 一 次 车 子 在 冰天雪地 打滑 ， 撞 山 壁 失败 而 返 。 

</p> 

<p id="length2">2886 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 (Northern Light)， 
一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 图 的 

Chena Hot Springs 温 泉 滤 假 村 。 旅 游 期 间 尝试 开车 直达 北 根 海 (Arctic ocean) 
,， 第 一 次 车 子 在 冰天雪地 打滑 ， 撞 山 壁 失败 而 返 。 
</p> 

</body> 

</html> 


HTML5+CSS3 王者 归来 


执行 结果 


2006 年 2 月 为 了 部 
接 证 北 概 因 的 Chena Hot 
天 雪 地 打 清 。 捧 山 履 失败 而 返 = 


极光 CNorthem Ligh)。 一 人 多 自学 机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 
泉 闭 仅 村 。 族 蔬 期 问 兰 试 开车 直达 北 福海 (Aretic Ocean) ， 第 一 次 车 子 在 冰 


A 
接 这 北极 网 的 Chene Bot Somees 直 朱 小 全 村 。 履 泊 所 全 二 谋生 丰 过 北 本 光 CAretie Qeesn) ” 沼 一 次 和 下 在 六 
天 当地 打 裔 。 捧 山 愉 失败 页 返 - 


2006 年 2 月 为 了 享受 边 泡 温 隶 边 在 极光 CNorthem Liaht)， 一 人 物 自 举 飞 机 至 阿拉 里 加 [Alaskay， 再 开车 往 北 至 


接近 上 北 术 图 的 Chena Hot Springs 温 朱 流 般 村 。 衣 游憩 间 关 试 开车 直达 北 机 兰 (Aretic Oeean) ， 第 一 次 车 子 在 冰 


天 号 地 打 漠 ， 扩 山 璧 失 政 而 返 。 


2006 年 2 月 为 了 部 受 边 泡 温泉 边 春 极光 QNorthem Light)。 一 人 各 自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 
接近 北 要 图 的 Chena Hot springs 设 泉 流 饥 村 。 族 醇 阴 间 会 坛 开 千 直达 北 械 寿 (Aretic Oeean) ， 第 一 次 车 子 在 六 
天 号 地 打 洪 ， 扒 山 尼 失 数 而 返 。 


2006 年 2 月 为 了 闻 受 边 泡 温 泉 边 看 概 光 0Northem Light)， 一 人 多 自 举 机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 
接近 北伐 图 的 Chena Hot Springs 强 录 藤 优生 用 入 及 问 会 试 开车 直达 北 税 海 (Aretie Ocean) ， 第 一 次 车 子 在 六 
天 当地 打 浅 ， 挤 山 旧 失 败 而 二。 


设置 字母 间距 的 letter-spacing 属性 


这 个 属性 的 使 用 格式 如 下 : 


letter-spacing: normal | length | initial | inherit; 


口 normal : 默认 值 ， 没 有 额外 空间 。 
口 length : 设 定 固定 的 字符 间距 ， 可 以 是 负 值 。 


程序 实例 ch12_4.html : letter-spacing 属性 的 测 。 15 </p> 


16 <p id="letterspacing2"> 


斌 。 这 个 程序 会 输出 3 行 数据 ， 第 1 行 字母 间距 17 Letter-spacing function testing 


a 18 </p> 
是 默认 宽度 ， 第 2 行 字母 间距 是 2px， 第 3 行 字 19 </body> 
20 </html> 

母 间 距 是 5px。 

1 <!doctype html> 四 

2 <html> 结果 

3 <head> 

4 <meta charset="utf-8"> L ing fncti . 

5 <title>ch12_4.html</title> 

6 <style> Letter-spacing function testing 

7 #letterspacingl { letter-spacing:2px; } 

8 #letterspacing2 { letter-spacing:5px; } Letter-spacing function testing 

9 


</style> 
10 </head> 
11 <body> 
12 <p>Letter-spacing function testing</p> 
13 <p id="Letterspacingl"> 
14 Letter-spacing function testing 


程序 实例 ch12_5.html : 将 letter-spacing 概念 应 用 在 中 英 混 合 的 文件 中 。 


1 <ldoctype html> 14 Chena Hot Springs 温 泉 湾 假 村 。 </p> 

2 <html> 15 <p id="letterspacing1"> 

3 <head> 16 2666 年 2 月 为 了 享受 边 泡 温 京 边 看 极光 (Northern Light)， 

4 <meta charset="utf-8"> 17 一 人 独自 坐 飞 机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 圈 的 
5 <title>ch12 5.html</title> 18 Chena Hot Springs 温 永 渡 候 村 - 

6 <style> 19 </p> 

7 #letterspacingl { letter-spacing:2px; } 29 <p id="letterspacing2"> 

8 #letterspacingz { letter-spacing:5px; } 21 2666 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 (Northern Light)， 

9 </style> 22 一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 转 的 
19 </head> 23 Chena Hot Springs 温 永 渡 假 村 

11 <body> 24 </p> 


12 <p>2886 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 (Northern Light) 25 </body> 
13 一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska) ， 再 开车 往 北 至 接近 北极 图 的 26 </html> 
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二 4 士 入 
执行 结果 2006 年 2 月 为 了 享受 边 泡 温泉 边 看 极光 (Northern Light)， 一 人 独自 坐 飞 机 至 阿拉 斯 加 
(Alaska)， 再 开车 往 北 至 接近 北极 圈 的 Chena Hot Springs 温 泉 渡 假 村 - 
2006 年 2 月 为 了 享受 边 泡 温泉 边 看 极光 (Northern Light)， 一 人 独自 坐 飞机 
至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 图 的 Chena Hot Springs 温 泉 
渡 假 村 。 
2006 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 (Northern Light)， 一 


人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 圈 的 
Chena Hot Springs 温 泉 渡 假 村 . 


| 12-5 | 设置 文字 间距 的 word-spacing 属性 | 


这 个 属性 的 使 用 格式 如 下 : 


word-spacing: normal | length | initial | inherit; 


口 normal : 默认 值 ， 文 字 间 距 是 0.25em。 

口 length : 设 定额 外 文字 的 间距 ， 可 以 是 负 值 。 

程序 实例 ch12_6.html : word-spacing 属性 的 测试 。 这 个 程序 会 输出 3 行 数据 ， 第 1 行文 字 间 距 是 
默认 宽度 ， 第 2 行文 字 间 距 是 2px， 第 3 行文 字 间 距 是 5px。 


1 <!doctype html> 16 <p id="wordspacing2"> 

2 <html> 17 word-spacing function testing 

3 <head> 18 </p> 

4 <meta charset="utf-8"> 19 </body> 

5 <title>ch12_6.html</title> 29 </html> 

6 <style> 

7 #wordspacingl { word-spacing:0.5em; } Z 二 J 士 

8 #wordspacing2 { word-spacing:lem; } 执行 结果 

9 </style> 

10 </head> word-spacing function testing 人 
11 <body> 是 

12 <p>word-spacing function testing</p> | 
13 <p id="wordspacing1"> word-spacing function testing | 
14 word-spacing function testing 

15 </p> 


ps 淹 处 理 空格 符 的 white-space 属性 


这 个 属性 的 使 用 格式 如 下 : 

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit; 
口 normal : 默认 值 ， 浏 览 器 会 忽略 空白 。 
口 nowrap : 本 文 不 换行 ， 直 到 遇 上 <br> 元 素 。 


HTML5+CSS3 王者 归来 


口 “pre : 保留 空白 ， 类 似 于 HTML 的 <pre> 元 素 。 

口 ”pre-line : 合并 空白 符号 ， 使 文件 正常 换行 。 

口 ”pre-wrap : 设 定 保留 空白 符号 ， 在 浏览 器 中 可 正常 换行 。 

程序 实例 ch12_7.html : white-space 的 应 用 。 这 个 程序 分 别 使 用 默认 、nowrap 〈 不 换行 )、pre (类 
似 HTML 的 <pre> 输出 ) 等 3 种 方式 测试 数据 的 输出 ， 另 外 也 改 成 使 用 class 类 别 选 择 器 。 


1 <!doctype html> 20 Pre: This is testing text. This is testinng text。 
2 <html> 21 This is testing text. This is testinng text, 

3 <head> 22 </p> 

4 <meta charset="utf-8"> 23 </body> 

5 <title>ch12_7.html</title> 24 </html> 

6 <style> 

7 p.nowrap { white-space:nowrap; } 

8 p.pre { white-space:pre; } 热 和 了 

9 </style> 

19 </head> 

11 <body> Default: This is testing text This is testinng text This is testing text， 人 


12 <p>Default: This is testing text. This is testinng text. This is testinng text 
13 This is testing text. This is testinng text. No : This is testing text This is testinng text This is testing text 了 


14 </p> 
15 <p class="nowrap"> 

16 Nowrap: This is testing text. This is testinng text. Pre: This is testing text This is testinng text. 

17 This is testing text. This is testinng text. This is testing text This is testinng teXt v 
18 </p> < > 


19 <p class="pre"> 


| 12-7 | 大 小 写 转 换 的 text-transform 属性 


这 个 属性 的 使 用 格式 如 下 : 


text-transform: none | capitalize | uppercase | lowercase | initial | inherit; 


none : 默认 值 ， 保 持 文字 原本 样式 。 

capitalize : 文字 第 1 个 字母 大 写 。 

uppercase : 将 字母 全 部 转 成 大 写 。 

lowercase : 将 字母 全 部 转 成 小 写 。 

程序 实例 ch12_8.html : text-transform 的 应 用 。 这 个 程序 分 别 使 用 capitalize、uppercase、lowercase 
3 种 大 小 写 文字 转换 方式 输出 数据 。 


加 司 , 昌 /加 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 eneta charset="utf-8"> 

5 <title>ch12_8.html</title> 
6 

7 

8 


<styte> 


p.text-capitalize { text-transform: capitalize; } Capitalize: This Is Testing Text. 
p.text-uppercase { text-transform:uppercase; } - 


ee { text-transform: lowercase; } UPPERCASE: THIS IS TESTING TEXT 
11 </head> ee 
12 <body> lowercase: this is testing text. 


13 <p class="text-capitalize">capitalize: This is testing text.</p> 
14 <p class="text-uppercase">uppercase: This is testing text.</p> 
15 <p class="text-lowercase">lowercase: This is testing text.</p> 
16 </body> 

</html> 
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下 查 汪 设置 文字 阴影 的 text-shadow 属性 


这 个 属性 的 使 用 格式 如 下 : 


text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit; 


h-shadow : 水 平 阴 影 的 位 置 ， 往 右 是 正 值 ， 允 许 负 值 ， 此 值 不 可 省 略 。 
v-shadow : 垂直 阴影 的 位 置 ， 往 下 是 正 值 ， 人 允许 负 值 ， 此 值 不 可 省 略 。 
blur-radius : 可 设 定 模糊 的 范围 ， 单 位 与 h-shadow 或 v-shadow 相同 ， 可 省 略 。 
color : 阴影 的 颜色 ， 可 省 略 。 

none : 默认 值 ， 即 没有 阴影 。 


text-shadow 允许 建立 多 重 的 阴影 ， 只 要 重复 h-shadow、v-shadow、blur-radius 即 可 。 
程序 实例 ch12_9.html : 这 个 程序 分 别 使 用 4 种 文字 阴影 展示 text-shadow 功能 。 如 果 水 平和 垂直 
阴影 的 位 置 是 0 时 设 定 了 模糊 范围 值 ， 则 往外 围 模糊 ， 可 参考 执行 结果 图 右 下 角 效果 ; 如 果 水 平和 
垂直 阴影 位 置 是 负 时 ， 则 阴影 是 往 左上 方 延伸 ， 可 参考 执行 结果 图 左下 角 效 果 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

§ <title>ch12_9.html</title> 
6 

" 

8 


OOOO DO 


<style> 
#test1 { text-shadow:S5px Spx Spx gray; font-size:50px;} 
#test2 { text-shadow:Spx Spx Spx yellow; font-size:50px; } 


9 #test3 { text-shadow:-Spx -5px Spx navy; font-size:50px; } 
10 #test4 { text-shadow:0px 9px 10px navy; font-size:50px; } 
11 </style> 

12 </head> 

13 <body> 


14 <p id="test1">DeepStone&nbsp;<span id="test2">DeepStone</span></p> 
15 <p id="test3">DeepStone&nbsp;<span id="test4">DeepStone</span></p> 
16 </body> 
17 </html> 


DeepStone DeepStone “ 
DeepStone DeepStone 、 


卫 时 | 设置 线条 装饰 的 text-decoration 属性 


这 个 属性 的 使 用 格式 如 下 : 

text-decoration: none | underline | overline | line-through | initial | inherit; 
none : 默认 值 ， 即 正常 显示 。 

underline : 底线 。 

overline : 顶 线 。 

line-through : 删除 线 。 


OODODODO DO 


HTML5+CSS3 王者 归来 


程序 实例 ch12_10.html : 底线 (underline)、 
顶 线 (overline)、 删 除 线 (line-through) 的 


应 用 。 

1 <!doctype html> 执行 结果 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> DeepStone 总 | 
5 <title>ch12_10.html</title> DeepStone | 

6 <style> | 
了 #test1 { text-decoration:underline;} Se bd 
8 #test2 { text-decoration:overline;} 

9 #test3 { text-decoration: line-through;} 

10 </style> 

11 </head> 

12 <body> 


13 <p id="test1">DeepStone</p> 
14 <p id="test2">DeepStone</p> 
15 <p id="test3">DeepStone</p> 
16 </body> 
17 </html> 


12-10| 再 谈 线条 装饰 


HTML5 除了 支持 前 一 节 所 述 的 线条 装饰 textrdecoration， 还 增加 了 更 多 相关 线条 装饰 的 功能 。 
但 是 这 些 功 能 目前 除了 FireFox 浏览 器 支持 外 ， 其 他 浏览 器 尚未 支持 ， 以 下 各 小 节 皆 是 使 用 FireFox 
浏览 器 所 获得 的 结果 。 


12-10-1 text-decoration-line 


这 个 属性 的 使 用 格式 如 下 : 


text-decoration-line: none | underline | overline | line-through | initial | 


inherit; 


它 的 属性 值 用 法 与 text-decoration 相同 。 
程序 实例 ch12_11.html : 使 用 text-decoration-line 重新 设计 ch12_10.html。 下 面 只 列 出 两 个 文件 的 


不 同 之 处 ， 执 行 结果 完全 相同 。 


6 ”<style> /* 需 使 用 Firefox 执 行 */ 

3 #test1 { text-decoration-line:underline;} 

8 #test2 { text-decoration-line:overline;} 

9 #test3 { text-decoration-line:line-through;} 
9 


1 </style> 


12-10-2 text-decoration-color 


这 个 属性 用 于 指定 装饰 线条 色彩 。 
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程序 实例 ch12_12.html : 蓝 色 底线 的 应 用 。 


1 <ldoctype html> 14 <p>Deep Learning</p> 
2 <html> 15 </body> 

3 <head> 16 </html> 

4 <meta charset="utf-8"> 

5 <title>ch12 12.html</title> 
6 
7 
8 


<style》/* 需 使 用 Firefox 执 行 */ 


pi{ 
text-decoration;underline; | 
9 text-decoration-color:blue; Deep Learning 
19 } 
11 </style> = 
12 </head> 
13 <body> 


12-10-3 text-decoration-style 
这 个 属性 用 于 设 定 线条 修饰 样式 ， 属 性 的 使 用 格式 如 下 : 


text-decoration-style: dashed | dotted | double | solid | wavy | initial | 
inherit; 
口 dashed : 虚线 。 
dotted : 点 线 。 
double : 双 线 。 
solid : 实 线 ， 这 是 默认 值 。 
wavy : 波浪 线 。 


目前 除了 solid 获得 Firefox 支持 外 ， 其 余 浏览 器 皆 不 支持 。 
程序 实例 ch12_13.html : text-decoration-style 的 应 用 。 


OOO DO 


1 xldoctype html> 16 </style> 

2 <html> 17 </head> 

3 <head> 18 <body> 

4 <meta charset="utf-8"> 19 <p><span id="linestyle1"»DeepStone - Deep Learning</span></p> 


5 <title>ch12 13.html</title> 26 <p><span inestyle2">Deepstone - Deep Learning</span></p> 
6 ”<style> /* 需 使 用 Firefox 执 行 +/ 21 <p><span inestyle3"»DeepStone - Deep Learning</span></p> 
pt 22 <p><span jnestyle4">DeepStone - Deep Learning</span></p> 
8 text-decoration:underline; 23 <p><span linestyle5">DeepStone - Deep Learning</span></p> 
9 text-decoration-color:blue; 24 </body> 

19 } 25 </html> 

1 span#linestyle1 { text-decoration-style:solid; } 

12 span#linestyle2 { text-decoration-style:dashed; } 

13 span#linestyle3 { text-decoration-style:dotted; } FS: 只 全 部 文字 都 加 底线 显示 ， 所 以 不 
14 Span#linestyle4 { text-decoration-style;double; } 

15 span#linestyle5 { text-decoration-style:wavy; } 再 列 出 执行 结果 。 


12-11| 设 定制 表 符 宽度 的 tab-size 属性 


这 个 属性 的 使 用 格式 如 下 : 


tab-size: number | length | initial | inherit; 


口 number : 设 定制 表 符 为 默认 的 8 个 英文 字符 宽度 。 
口 length : 设 定制 表 符 的 长 度 ， 目 前 尚未 获得 主要 浏览 器 支持 。 


HTML5+CSS3 王者 归来 


程序 实例 ch12_14.html : 这 个 程序 分 别 以 默 执行 结果 
认 、12、16 个 空格 符 宽度 测试 tab-size 属性 。 
1 <ldoctype html> 合用 。 tat 名 黑 认 


2 <html> 合用 ta 外 tab-size = 12 

3 <head> 使 用 tat 刍 tab-size 16 
4 <meta charset="utf-8"> 
名 <title>ch12 14.html</title> 
6 
~ 
8 


<style> /* 请 在 chrome 浏 览 器 执行 */ 

#test1 { tab-size:12; } 

#test2 { tab-size:16; } 
9 </style> 
16 «</head> 
11 <body> 
12 <pre> 使 用 tab 键 。 默认 </pre> 
13 <pre id="test1"> 使 用 tab 键 tab-size 12</pre> 
14 <pre id="test2"> 使 用 tab 键 tab-size 16</pre> 
15 </body> 
16 </html> 


12-12 设 定 换行 的 word-wrap 属性 


这 个 属性 主要 是 处 理 显示 区 宽度 无 法 显示 较 长 的 单字 ， 如 URL 的 网 址 时 ， 网 页 的 处 理 方式 。 这 
个 属性 的 使 用 格式 如 下 : 


word-wrap: normal | break-word; 
口 normal : 默认 值 ， 只 有 在 可 以 换行 的 地 方 换行 ， 否 则 持续 显示 直到 结束 。 


口 break-word : 可 用 于 将 较 长 的 单字 或 URL 网 址 中 途 换 行 。 


程序 实例 ch12_15.html : word-wrap 的 应 用 。 这 个 程序 使 用 两 种 属性 值 测 试 ， 读 者 可 以 由 此 了 解 
normal 和 break-word 属性 值 的 差别 。 同 时 这 个 程序 使 用 了 两 个 尚未 讲解 的 属性 : 

width : 应 用 于 第 8、13 行 ， 可 以 设 定 文本 块 的 宽度 。 先 前 这 个 属性 常用 于 设 定 图 片 的 宽度 ， 但 
是 应 用 在 段落 则 可 以 设 定 段落 的 宽度 。 

border : 应 用 于 第 9、14 行 绘制 文本 块 ， 本 例 是 设 定 线 宽 为 1px、solid 〈 实 线 ) 、blue 〈 蓝 色 )， 


15-4-4 节 会 有 更 多 这 方面 的 说 明 。 

1 <!doctype html> 16 全 

2 <html> 17 ”</styte> 

3 iiads 18 </head> 

4 <meta charset="utf-8"> 219 <body> 

5 <title>ch12 15.htnte/title> 20 <p id="test1">Silicon Stone Education (http://www.siliconstone, con) 

te 21 is unbiased organization, concentrated on bringing the gap between 

有 22 academic and the working wortd in order to benefit society as a whote.</p> 

23 <p id-"test2">Siticon Stone Education (http://www.siliconstone, com) 

8 width:156px 24 is unbiased organization，concentrated on bringing the gap between 
border:1px solid blue; 25 academic and the working world in order to benefit society as a whole.</p> 
word-wrap:normal; 26 </body> 

27 </html> 
#test2 { 
width:150px; 


border:1px solid blue; 
word-wrap:break-word; 
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> 


< 


12-13| 设 定 文字 超出 范围 的 text-overflow 属性 


这 个 功能 原本 是 Microsoft 公司 正 浏览 器 特有 的 属性 功能 ， 但 现 已 被 收录 在 CSS3 中 。 这 个 属 
性 的 使 用 格式 如 下 : 

text-overflow: clip | ellipsis | string | initial | inherit; 
口 clip : 超出 显示 区 不 予 显示 。 
口 ellipsis : 超出 显示 区 以 “…” 显 示 。 
程序 实例 ch12_16.html : text-overflow 的 应 用 。 这 个 程序 使 用 两 种 属性 值 测试 ， 读 者 可 以 了 解 clip 
和 ellipsis 属性 值 的 差别 。 同 时 这 个 程序 使 用 了 1 个 尚未 讲解 的 属性 : 

overflow : 将 overflow 属性 值 设 为 hidden 时 ， 溢 出 的 数据 将 被 隐藏 。15-8 节 将 更 完整 地 讲解 此 


属性 。 
1 cldoctype html> 20 } 
2 <html> 21 </style> 
3 <head> 22 </head> 
4 <meta charset="utf-8"> 23 <body> 
5 <title>ch12 16.html</title> 24 xp id="test1">Silicon Stone Education is an unbiased organization,</p> 
6 <style> 25 <p id="test2">Silicon Stone Education is an unbiased organization,</p> 
7 #test1 { 26 </body> 
8 width;150px; 27 </html> 
9 border:1px solid blue; 
19 overflow:hidden; /* 道 出 数据 隐藏 */ 士 
11 text-overflow:clip; /” 兹 出 数据 不 显示 “/ 执行 结果 
12 white-space:nowrapj /* 不 搞 行 等 出 */ 
13 } 
14 #test2 { HT 9 
15 width:150px; 
16 border:1px solid blue; 一 
17 overflow:hidden; Eon ioe ne 
18 text-overflow:ellipsis; /* 游 出 资料 以 .。。 显示 “/ 
19 white-space:nowrap; 
| 
习题 


1. 请 将 text-shadow 功能 应 用 在 自己 姓名 ,设计 出 5 种 效果 。 
2. 请 将 text-shadow 功能 应 用 在 学 校 名 称 ， 设 计 出 5 种 效果 。 
3. 请 使 用 所 学 知识 ， 重 新 设计 ch11_15.html。 


将 CSS 应 用 在 项 目 列表 


本 章 摘要 

13-1 建立 项 目 列表 符号 的 list-style-type 属性 

13-2 ”建立 图 片 项 目 符号 的 list-style-image 属性 
13-3 项 目 符号 与 编号 位 置 的 list-style-position 属性 
13-4 ”简易 表示 法 list-style 


第 13 章 将 CSS 应 用 在 项 目 列表 


| 13-1 | 建立 项 目 列表 符号 的 list-style-type 属性 


5-1 节 曾 介绍 可 以 使 用 <ul> 元 素 建立 点 符 列表 ， 每 一 条 列表 前 有 实心 圆 点 符号 。5-2 节 曾 介绍 可 


以 使 用 <ol> 元 素 建立 有 编号 的 项 目 列表 ， 每 一 条 列表 前 有 编号 。 我 们 可 以 使 用 CSS 的 list-style-type 
属性 设 定 不 同 的 项 目 符号 或 是 编号 。 


list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower- 


roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | 


upper-latin | hebrew | armenian | georgian | none | inherit; 


[me] 


Bg G8 


下 列 是 项 目 符号 的 属性 值 : 

disc : 默认 值 ， 表 示 实 心 圆 点 。 

circle : 空心 圆 点 。 

square : 实心 方块 。 

none : 不 显示 项 目 符号 。 

下 列 是 编号 符号 的 属性 值 : 

decimal : 阿拉 伯 数 字 ， 从 1 开始 计数 。 

decimal-leading-zero : 阿拉 伯 数 字 ， 从 01，02，… 开始 计数 。 
lower-roman/upper-roman : 小 写 /大 写 罗 马 数字 (i/ 了 1)。 
lower-alpha/upper-alpha : 小 写 /大 写 英 文字 母 (a/A)。 

lower-greek : 小 写 希 腊 字 母 。 

lower-latin/upper-latin : 小 写 /大写 拉 丁字 母 。 
hebrew/armenian/georgian : 希 伯 来 编号 / 亚美尼亚 编号 / 乔治 亚 编号 。 
hiragana/katakana/hiragana-iroha/katakana-iroha : 日 文 片 假 名 (a/A/VI)。 


程序 实例 ch13_1.html : 使 用 list-style-type 属性 更 改 项 目 符号 与 编号 符号 。 


p 
2 
E3 


21 
22 
23 


<ldoctype html> 4 二 4 士 
<html> 执行 结 


<head> 
<meta charset="utf-8"> 
<title>ch13 1.html</title> 
<style> 。 南极 大 陆 
ul.circle { list-style-type:circle; } 9 北极 海 
ol.uroman { list-style-type:upper-roman; } 。 中国 西藏 
</style> L 明志 科大 
</head> 工 台湾 科大 
a 苞 台北 科大 
<ul class="circle"> 
<1i> 南 极 大 陆 </1i> 
<1i> 北 极 海 </1i> 
<1i> 中 国 西藏 </1i> 
</ul> 
<ol class="uroman"> 
< 二 > 明志 科大 </1i> 
<]i> 台 湾 科大 </1i> 
<1i> 台 北 科大 </1i> 
</ol> 
</body> 
</html> 


HTML5+CSS3 王者 归来 


| 13-2 建立 图 片 项 目 符号 的 list-style-image 属性 


CSS 也 允许 使 用 图 片 项 目 符号 设 定格 式 如 下 : 

list-style-image: none | url(filename) | initial | inherit; 

url 内 的 是 图 片 文件 名 。 
程序 实例 ch13_2.html : list-style-image 的 应 用 ， 同 时 这 个 程序 也 尝试 修改 项 目 数据 的 文字 颜色 和 
背景 颜色 ， 读 者 可 以 自行 体会 它们 的 变化 。 


1 <!ldoctype html> 28 <li id="bgyellow"> 明 志 科 大 </1i> 
2 <html> 21 <1i> 台 湾 科大 </1i> 
3 <head> 22 <li> 台北 科 大 </1i> 
4 <meta charset="utf-8"> 23 </ol> 

5 <title>ch13 2.html</title> 24 </body> 

6 <style> 25 </html> 

7 ul.blueball { list-style-image:url(bball.jpg); } 

8 ol,bsquare { list-style-image:url(bsquare,jpe); } 

9 1i#bluecolor { color:blue; } 

19 li#bgyellow { background-color:yellow; } 

11 </style> 

12 </head> 

13 <body> 


14 ¢ul class="blueball"> 

15 <li id="bluecolor"> 南 极 大 陆 </1i> 
16 ”<liy 北 极 海 c/1i> 

17 。 《1iy 中 国 西 向 </1iy 

18 </ul> 

19 《ol class="bsquare"> 


| 13-3 项 目 符号 与 编号 位 置 的 list-style-position 属性 


可 以 使 用 此 属性 设 定 项 目 符号 与 编号 的 位 置 ， 格 式 如 下 : 


list-style-position: inside | outside | initial | inherit; 


下 列 是 inside 与 outside 的 关系 图 。 


Outside 
。 南极 大 陆 
* 北极 海 
Inside 
* 北极 海 
站 sa 
程序 实例 ch13_3.html : list-style-position 的 应 用 。 
1 xldoctype html> 16 -</style> 
2 <html> 17 </head> 
3 <head> 18 <body> 
a ‘<meta charset="utf-8"> 19 <ul class="blueball"> 
5 <title>ch13 3.html</title> 20 <]1> 台 湾 鞋 名 科技 大 学 </1i> 
6 <style> 21 </ul> 
7 v1.blueball { 22 <ul class-"po-inside"y 
8 list-style-image:url(bball .jpg); 23 。 <li id-"bluecolor"? 明 去 科大 c/1iy 
9 Hist-style-position:outside; 24 。 <liy 台 湾 科 大 c/1i7 
18 和 25 <li> 台北 科大 </1i> 
11 vl.po-inside { 26 xjuly 
12 list-style-inage:url(bsquare, jpg); 27 </body> 
3 list-style-position:inside; 25 </html> 


} 
15 #bluecolor { color:blue; } 


第 13 章 将 CSS 应 用 在 项 目 列表 


| 13-4 | 简易 表示 法 list-style 


这 是 前 3 节 属 性 设 定 的 简易 表示 法 ， 可 以 设 定 所 有 的 项 目 列表 属性 ， 使 用 时 可 以 依 序 设 定 下 列 属性 值 : 
list-style-type list-style-position list-style-image 
上 述 属 性 的 默认 值 分 别 是 disc、outside、none， 使 用 时 属性 值 间 需 用 空格 隔 开 ， 如 果 某 个 属性 


值 使 用 默认 值 ， 则 可 以 省 略 。 
程序 实例 ch13_4.html : 使 用 list-style 属性 重新 设计 ch13_3.html。 


1 <ldoctype html> 15 </ul> 
2 <html> 16 <ul class="po-inside”> 
3 <head> 17 <li id="bluecolor"> 明 志 科大 </1i> 
4 <meta charset="utf-8"> 18 《<11> 各 湾 科大 </1i> 

<title>ch13 4.html</title> 19 。 <li> 台 北 科大 c/1i> 


6 29 </ul> 
7 ul.blueball { list-style: outside url(bball.jpg); } 2 ca 
8 ul.po-inside { list-style:inside url(bsquare.jpg); } wn 
9 #bluecolor { color:blue; } 
/styl = 
1 三 肖 与 chl3 3html 执行 结果 相同 ， 不 
12 <bod. 人 LY 一 
13 eol Cass-rbluebal1"s 过 上 述 程序 精简 了 整个 设计 ， 第 7 行 取代 原先 的 
1iy 台 湾 著名 科技 大 学 </1i ee Ee eg 
ee on. 第 7 一 10 行 ,第 8 行 取代 了 原先 的 第 11 ~ 14 行 。 
习题 


1. 请 重新 设计 第 5 章 习题 1， 执 行 下 列 修 订 。 
A. 将 项 目 符号 改 成 空心 圆 点 
B. 将 项 目 符号 改 成 空心 方块 
C. 将 项 目 符号 改 成 任意 图 片 
2. 请 重新 设计 程序 实例 ch5_7.html， 将 清单 编号 改 成 : 
A. decimal-leading-zero : 阿拉 伯 数 字 ， 从 01，02,，… 开始 计数 
B. lower-greek : 小 写 希腊 字母 
C. lower-latin/upper-latin : 小 写 /大 写 拉丁 字母 
D. hebrew : 希 伯 来 编号 
E. armenian : 亚美尼亚 编号 
F. gerogian : 乔治 亚 编号 
3. 请 重新 设计 第 5 章 习 题 3， 请 读者 发 挥 创意 ， 美 化 网 页 版 面 整体 设计 。 


本 章 摘 要 

14-1 透明 色 

14-2 设置 背景 颜色 的 background-color 属性 

14-3 ”设置 背景 图 像 的 background-image 属性 

14-4 ”设置 背景 是 否 重复 出 现 的 background-repeat 属性 

14-5 设置 背景 图 片 位 置 的 background-position 属性 

14-6 设置 背景 图 片 大 小 的 background-size 属性 

14-7 设置 背景 图 片 随 内 容 卷 动 的 background-attachment 
属性 

14-8 背景 简易 表示 法 background 


二 
在 正式 讲解 设计 背景 前 ， 先 介绍 透明 色 ， 


14-1-1 rgba() 函数 
这 个 函数 扩充 了 rgb0 函数 (可 参考 11-2 节 ) 的 功能 。 


rgbal(red, green, blue, alpha) 


其 中 alpha 是 介 于 0.0〈 完 全 透明 ) 和 1.0〈 完 全 不 透明 〉 间 的 数值 。 


14-1-2 hsla() 函数 


这 个 函数 扩充 了 hue0 函数 (可 参考 11-2-3 节 ) 的 功能 。 


hsla(hue, saturation, lightness, alpha) 


其 中 alpha 是 介 于 0.0〈 完 全 透明 ) 和 1.0〈 完 全 不 透明 ) 间 的 数值 。 


14-1-3 透明 度 opacity 
opacity 属性 的 使 用 格式 如 下 : 


opacity: value | inherit 


其 中 value 是 介 于 0.0〈 完 全 透明 ) 和 1.0〈 完 全 不 透明 ) 间 的 数值 。 
使 用 rgba()、hsla() 函数 和 opacity 属性 进行 透明 度 为 1、0.6、0.3 的 测 


亡 -个 人 的 和 极 境 旅行 - 南极 大 陆 北极 海 


程序 实例 ch14_1.html ; 
试 ， 并 比较 执行 结果 。 


1 <ldoctype html> 


2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

[ <title>ch14 1.html</title> 

6 <style> 

t p.mlsecl { background-color:lightgray; color:rgba(9,90,255,1); } 

8 p.misec2 { background-color:lightgray; color:rgba(9,0,255,9.6); } 

9 p.misec3 { background-color:lightgray; color:rgba(9,0,255,0.3); } 
10 p.m2secl { background-color:lightgray; color:hsla(129,100%,50%,1); } 
11 p.m2sec2 { background-color:lightgray; color:hsla(120,180%,50X,0.6); 
12 p.m2sec3 { background-color:lightgray; color:hsla(129,100%,50%,0.3); 
13 p.m3sec1 { background-color:lightgray; color:red; opacity:1; } 

14 p.masec2 { background-color:lightgray; color:red; opacity:9.6; } 
15 p.m3sec3 { background-color:lightgray; color:red; opacity:9.3; } 
16 </style> 

17 </head> 

18 <body> 


19 <p class="mlsec1"> 一 个 人 的 极 境 旅行 - 南极 大 陆 北 极 海 </p> 
28 <p class="misec2"> 一 个 人 的 极 境 旅行 - 南极 大 陆 北 极 海 </p> 


21 <p class-"misec3"> 一 个 人 的 极 境 旅行 - 南极 大 陆 北 极 海 </p> 
22 xp cla - 南极 大 陆 北极 海 </p> 
23 <p cla - 南极 大 陆 北极 海 </p> 
24 <p cla - 南极 大 陆 北 极 海 </p> 
25 <p class="m3sec1"> 一 个 人 的 极 境 旅行 - 南极 大 陆 北 极 海 </p> 
26 <p class="m3sec2"> 一 个 人 的 极 境 旅行 - 南极 大 陆 北 极 海 </p> 
27 <p class="m3sec3"> 一 个 人 的 极 境 旅行 - 南极 大 陆 北极 海 </p> 
28 </body> 

29 </html> 


第 14 章 


设计 背景 


以 后 在 介绍 背景 颜色 时 再 进行 综合 说 明 。 


| i 北极 海 


一 个 人 的 契 境 旅行 - 丙 机 大 出 北 概 海 
个 人 的 极 境 旅行 - 南 模 大 陆 北 朴 潭 


159 


0 


HTML5+CSS3 王者 归来 


设置 背景 颜色 的 background 一 color 属性 


之 前 已 有 许多 关于 背景 颜色 的 实例 ， 本 节 是 完整 说 明 。 背 景 颜色 属性 的 使 用 格式 如 下 : 
background-color: color name | hex number | rgb number | transparent | inherit 
color_name : 以 颜色 名 称 设 定 背 景色 ， 此 应 用 已 经 有 许多 范例 了 ， 可 参考 附录 E。 
hex_number : 以 十 六 进 制 设 定 颜色 背景 值 ， 如 #ff00ff。 

rgb_number : 以 rgb0 函数 设 定 背 景 颜色 ， 如 rgb (ff.00,ff)。 

transparent : 默认 值 ， 即 背景 颜色 是 透明 的 。 


程序 实例 ch14_2.html : background-color 的 应 用 。 这 个 程序 比较 特别 的 是 程序 第 7 行 ， 此 处 将 整 
个 网 页 背景 缘 设 为 lightyellow 颜色 。 


1 <!ldoctype html> = 
2 <html> 执行 结果 
3 <head> 


罗 加 :国生 


a ‘<meta charset="utf-8"> 

E] <title>ch14 2,html</title> 

6 <style> i 

7 body { background-color:1ightyellow; } 潜 锦 魁 著作 

a ha { background-color:lightgray; } 

9 p,bookl { background-color: lightgreen; } 

1 p,book3 { backeround-color:transparent; } 

i 过 由 补 之 路 = 廊 将 必用 和 征 
13 《/head> 


14 <body> 五 
15 hay 吕 风 相 著 作 cynay 及 语言 - 迈 向 大 Big Data 之 路 
16 <p class="book1") 一 个 人 的 极 境 旅行 - 南极 大 陆 北 极 海 c/p> 
17 《p c1ass="book2"> 远 向 赔 神 之 路 - 麻将 必 胜 秘籍 </py 

18 <p class="book3">R 语 言 - 迈 向 大 Big Data 之 路 </p> 

19 </body> 

29 </html> 


设计 网 页 时 ， 也 可 以 将 某 个 网 页 区 块 设 为 背景 ， 这 时 10-4 节 所 介绍 的 <div> 元 素 就 非常 有 用 了 。 
程序 实例 ch14_3.html : 重新 设计 ch3_8.html， 为 这 个 程序 加 上 区 块 以 及 区 块 背景 。 


1 <ldoctype html> 


2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch14 3.html</title> 一 

6 <style> 执行 结 
7 div.divl { background-color:yellow } 

3 div.div2 { background-color:lightgreen } 


14 ”<p> 花 同一 音 活 ， 独 梧 无 双亲 : 举 杯 道明 月 ， 对 影 成 三 人 -</p> 
15 </div> 

16 <hr> 

17 <div class="div2"> 

18 ”<h1> 静 夜 思 </h1> 

19 ”<p> 床 前 明月 光 ， 疾 是 地 上 硕 . 举 头 望 明月 ， 低 头 思 故乡 .</p> 
28 </div> 

21 </body> 

22 </html> 


9 </style> 
18 </head> 

11 <body> 

12 <div class="div1"> 

13 ”<h1> 月 下 独 酌 </h1> 


160 


第 14 章 设计 背景 


设置 背景 像 的 background-image 属性 | 


这 个 属性 默认 是 将 图 片 从 左上 角 往 水 平和 垂直 方向 重复 放置 ， 它 的 使 用 格式 如 下 : 


background-image: url(url) | none | inherit 


口 url : 图 片 的 URL。 
口 none : 不 显示 背景 图 像 。 
程序 实例 ch14_4.html : 将 图 片 设 定 为 网 页 背景 。 


ld html 了 
和 执行 结果 


3 《head> 

4 <meta charset-"utf-8"> 

5 <titleych14 4.html</title> 
6 <style> 

. body { background-image:url(sea.jpg); } 
8 hi { text-align:center; } 
9 </style> 

19 </head> 

11 <body> 

12 <h1> 洪 锦 魁 大 作 </ha1> 

13 <*/body> 

14 </html> 


CSS 是 允许 设 定 多 个 背景 图 片 的 ， 这 时 会 有 层次 的 问题 ， 先 放 的 图 片 会 在 图 层 的 上 方 ， 在 安置 
时 url (URL) 间 以 “,” 隔 开 。 
程序 实例 ch14_5.html : 将 两 张 图 片 当 背景 的 应 用 。 由 于 是 先 放置 “stargif”， 所 以 此 图 片 是 在 图 层 的 
上 上 谨 5 


1 <!doctype html> Am 
2 ta 执行 结果 
3 <head> 
<meta charset="utf-8"> 
<title>ch14_5.html</title> 
<style> 
body { background-image:url(star.gif), url(sea,jpg); } 
8 </style> 
9 </head> 
10 <body> 
11 </body> 
12 </html> 


设计 网 页 时 也 可 以 将 图 片 应 用 在 项 目 列表 。 
程序 实例 ch14_6.html : 将 背景 图 sea.jpg 加 在 项 目 列表 内 。 


1 <ldoctype html> | 执行 结果 | 


2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


5 <title>ch1i4 6.html¢/title> 

6 <style> 

汉 div.divlist { background-image:url(sea. jpg); } 
8 </style> 

9 </head> 

19 *body> 


11 <div class="divlist"> 
12 <hi> 机 器 人 赛跑 排行 榜 </hi> 


4 
5 
6 
7 


13 xol start-"4"> a 
14 <li> 明志 科大 </1i> 设计 网 页 时 也 可 以 将 图 片 应 用 在 表格 数据 。 
15 <1i> 台 湾 科大 </1i> 

16 <1i> 台 北 科大 </1i> 

17 </ol> 

18 </div> 

19 </body> 


28 </html> 


HTML5+CSS3 王者 归来 


程序 实例 ch14_7.html : 将 背景 图 sea.jpg 加 在 表格 内 。 以 这 个 程序 而 言 ， 读 者 需 注意 第 11 行 ， 这 
行 指 出 应 如 何 将 背景 图 应 用 在 表格 内 。 
了 phe html> | 执行 结果 ， 果 


3 <head> 
‘<meta charset="utf-8; 


4 
5 <titleych14 7. htmlchtitley 

6 <style> 

7 table,backinage { background-image:url(sea, jpg); } 
3 xjstyley 

9 </head> 

10 xbody> 

11 <table border="1" class= i > 

12 ”xthead><!-- 建 立 表 头 - 

13 <trycth colspan="3 -深交 场 cfthycltry 

14 <try<th> 店 名 </th>cth> 地 址 <c/th>cthy 营 业 时 间 </th></try 
15 </thead> 

16 。 <tbody><1-。 建立 表格 本 体 --》 


17 <tr><td> 天 母 店 </td><td> 台 北市 吾 诚 路 296 号 </td> 

18 <td rowspan="2">09:00-23:08¢/td></tr> 

19 <tr2<td> 大 安 店 c/td><td> 台 北市 大 安 路 19 号 </td></tr> 
20 <tr>td> 新 性 店 e/td>ctd> 新 竹 市 清华 焉 112 可 </td><td>11:88-29:09</td></tr> 
21 </tbody> 

22 <tfoot><1-- 建立 表层 - 

23 <tr2ctd colspan="3"; es ee ‘</tr> 
24 </tfooty 

25 </table> 

26 

27 </body> 

28 </html> 


设置 背景 是 否 重复 出 现 的 background-repeat 属性 性 


这 个 属性 可 设 定 图 像 是 否 重复 出 现 ， 它 的 使 用 格式 如 下 : 


background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | 


inherit; 


repeat : 默认 值 ， 图 片 将 在 水 平方 向 和 垂直 方向 重复 出 现 。 

repeat-x : 设 定 图 片 沿 x 轴 水 平方 向 重复 出 现 。 

repeat-y : 设 定 图 片 沿 y 轴 垂 直方 向 重复 出 现 。 

no-repeat : 设 定 图 片 只 显示 一 次 。 

space : 设 定 图 片 在 水 平和 垂直 重复 出 现时 自行 调整 间距 ， 让 图 片 完 整 呈 现 。 
round : 设 定 图 片 在 水 平和 垂直 重复 出 现时 自行 重 设 大 小 ， 让 图 片 完整 呈现 。 


程序 实例 ch14_8.html : 让 图 片 只 显示 一 次 。 
了 < 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch14 8.html</title> 
<style> 
body { 
background-image:url(sea.jpg); 
9 background-repeat:no-repeat; 
10 } 
11 </style> 
12 </head> 
13 <body> 
14 </body> 
15 </html> 


口 


= 


mJ opwNp 
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程序 实例 ch14_8_1.html : 让 图 片 沿 水 平方 向 执行 结果 


重复 。 
6 <style> 
4 body { 
8 background-image:url(sea. jpg); 
9 background-repeat: repeat—x; 
19 } 


11 </style> 


程序 实例 ch14_8_2.html : 让 图 片 沿 垂直 方向 重复 。 


6 <style> 


7 body { 
8 background-image:url(sea.jpg); 
9 background-repeat: repeat-y; 

19 } 


11 </style> 


设置 背景 图 片 位 置 的 background-position 属性 


这 个 属性 可 以 设 定 图 片 放 在 指定 位 置 ， 而 不 是 一 律 放 在 左上 角 ， 它 的 使 用 格式 如 下 : 
background-position: value; 
value 值 可 以 是 下 列 几 类 
口 left top、 left center、 left bottom、 right top、 right center、 right bottom、 center top、 
center center 、center bottom 
此 类 值 的 默认 值 是 0%, 0%。 如 果 只 设 定 一 个 关键 词 ， 则 另 一 个 字 一 定 是 center。 另 外 ， 图 片 的 
垂直 位 置 会 与 目前 显示 数据 有 关 ， 而 不 是 与 窗口 高 度 有 关 ; 图 片 的 水 平 位 置 会 与 窗口 宽度 有 关 。 
OD x%y% 
用 百分比 方式 设 定 值 ，x% 表示 水 平 位 置 ，y% 表示 垂直 位 置 ， 左 上 角 是 0%0%， 右 下 角 是 
100%100%。 如 果 只 设 定 一 个 值 ， 则 另 一 个 值 一 定 是 50%。 
口 xpos ypos 
第 一 个 值 表示 水 平 位 置 ， 第 二 个 值 表示 垂直 位 置 ， 可 以 使 用 附录 D 中 介绍 的 网 页 长 度 单位 ， 例 
如 像素 (px)。 如 果 只 设 定 一 个 值 ， 则 另 一 个 值 是 50%。 可 以 混用 % 和 position 值 。 
程序 实例 ch14_9.html : 将 图 片 居中 放置 的 应 用 。 


1 <ldoctype htnl> 14 <body> 

2 <html> 15 ”<h1> 月 下 独 酌 </h1> 

3 <head> 16 ”<p> 花 同 一 这 酒 ， 独 柄 无 双亲 ; 举 杯 洲 明 月 ， 对 影 成 三 人 。</p> 
4 <meta charset="utf-8"> 17 <hr> 

5 <title>ch14 9.html</title> 18 ”<h1> 静 夜 电 </hi> 

6 <style> 19 ”<p> 床 前 明月 光 ， 疑 是 地 上 着 。 举 头 望 明月 ， 低 头 思 故 乡 。</p> 
7 body { 28 </body> 

8 background-image: url(ball.gif); 21 </html> 

本 background-repeat :no-repeat; 

19 background-position:center center; 

11 } 

12 </style> 

13 </head> 
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请 适度 更 改 窗口 宽度 和 高 度 ， 以 便 进 一 步 体会 本 例 的 意义 。 


月 下 独 酌 


花 间 一 过 酒 ， 独 酌 无 双亲 。 举 杯 邀 明月 ， 对 影 成 三 人 。 


全 
静夜 思 


床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明月 ， 低 头 思 故 乡 。 


本 书 ch14 文件 夹 中 的 文件 ch14_9_1.html 至 ch14 9_8.html 是 其 他 8 种 图 片 位 置 的 实例 ， 读 者 可 
以 进行 测试 。 
程序 实例 ch14_10.html : 以 百分比 方式 。 设 定 图 片 位 置 是 30% 30%。 本 程序 只 列 出 与 前 一 程序 不 
同 之 处 。 


10 background-position:30% 30%; 


请 适度 更 改 窗口 宽度 和 高 度 ， 以 便 进一步 体会 本 例 的 意义 。 


月 下 独 酌 


花 间 一 谈 酒 ， 2 人 举 杯 邀 明月 ， 对 影 成 三 人 。 


静夜 思 


床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明月 ， 低 头 思 故 乡 。 


程序 实例 ch14_11.html : 以 xpos 和 ypos 方式 ， 设 定 图 片 位 置 是 47px 120px。 本 程序 只 列 出 与 前 
一 程序 不 同 之 处 。 


10 background-position:47px 120px; 


请 适度 更 改 窗口 宽度 和 高 度 ， 以 便 进一步 体会 本 例 的 意义 。 


月 下 独 酌 


花 间 一 壶 酒 ， 独 酌 无 双亲 。 举 杯 邀 明月 ， 对 影 成 三 人 。 


@ 
静夜 思 


床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明 月 ， 低 头 思 故 乡 。 
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程序 实例 ch14_12.html : 图 片 居中 对 齐 的 应 用 。 


<!doctype html> 
<html> 执行 结果 


bi 
3 
3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch14_12.html</title> 
6 

党 

8 


<style> 

hi, h2 { color:blue; text-align:center; } 

body { 
9 background-image:url(seapict.gif); 
10 background-repeat:no-repeat; 
11 background-position:center center; 
12 } 
13 </style> Computer Knowledge Today 
14 </head> 
15 <body> 


16 <hi>Silicon Stone Education</hl> 
17 <h2>Big Data Series</h2> 

18 <h2>Data Anatyst Series</h2> 

19 <h2>Photography</h2> 

20 <h2>Designing 3D Games</h2> 

21 <h2>Visual Identity</h2> 

22 <h2>Computer Knowledge Today</h2> 
23 </body> 

24 </html> 


14-6 设置 背景 图 片 大 小 的 background-size 属性 


这 个 属性 的 使 用 格式 如 下 : 

background-size: auto | length | percentage | cover | contain | initial | 
inherit; 
口 auto 

默认 选项 ， 即 背景 图 依 本 身 的 宽 高 显示 ， 若 是 背景 空间 不 够 ， 则 只 显示 部 分 图 像 。 
口 length 


设置 图 片 的 宽度 和 高 度 ， 第 一 个 值 是 宽度 ， 第 二 个 值 是 高 度 。 如 果 只 设 一 个 值 ， 则 另 一 个 值 被 
默认 为 auto。 
OD percentage 

以 父 元 素 的 百分比 来 设置 图 片 的 宽度 和 高 度 ， 第 一 个 值 是 宽度 ， 第 二 个 值 是 高 度 。 如 果 只 设 一 
个 值 ， 另 一 个 值 被 默认 为 auto。 


DD cover 
使 用 cover 设置 图 像 时 ， 可 能 造成 部 分 图 像 不 在 背景 区 。 
DO contain 


使 用 contain 设置 图 像 时 ， 图 像 会 依 背景 大 小 自行 调整 以 覆盖 整个 背景 区 。 


入 


HTML5+CSS3 王者 归来 


程序 实例 ch14_13.html : background-size 属性 cover 和 contain 值 的 应 用 。 


1 <ldoctype html> 23 </div> 

2 <html> 24 <hr> 

3 <head> 25 <div class="div2"> 

4 <meta charset="utf-8"> 26 。” “hl? 毅 夜 思 <c/hl> 

5 <title>ch14 13.html</title> 27 。” “py 床 前 明月 光 ， 疑 是 地 上 者-。 举 头 望 明月 ， 低 头 思 故乡 ，</p> 
6 <style> 28 </div> 

7 div.divi { 29 </body> 

8 background-image: url(star. gif); 38 </html> 

9 background-repeat :no-repeat; 

16 background-size: cover; 3 

11 攻 执行 结果 

12 div.div2 { 

13 background-image: url(star .gif); 

14 background-repeat :no-repeat; 月 下 独 酌 

5 background-size: contain; 

16 } 论 风 一 过 酒 ， 独 的 无 双亲 对 影 成 三 人 。 
17 </style> 

18 </head> 0 

19 <body> 

po 8 光 ， 钱 是 地 上 币 。 举 头 饪 明月 ， 低 科恩 故 多 ， 


21 “hl> 月 下 独 酌 </h1> 
22 ”<p) 花 间 一 变 泻 ， 独 酌 无 双亲 ; 举 杯 道明 月 ， 对 影 成 三 人 。 </p> 


程序 实例 ch14_14.html : 设 定 背 景 图 片 大 小 的 另 一 个 应 用 ， 其 中 divl 的 背景 图 片 使 用 固定 宽度 ， 
div2 依旧 使 用 contain 属性 值 。 下 面 只 列 出 <style> 元 素 的 与 ch14_13.html 不 同 之 处 。 


6 <style> 

8 background~image:url(sea, jpg); 证 

9 background-repeat:no-repeat; 

10 background-position:center center; 

Ee background-size:400px; a 
12 

13 div.div2 { 

14 background-image:url(sea. jpg); 


15 background-repeat:no-repeat; 
16 background-size:contain; 
17 $ 


18 </style> 


读者 可 以 改变 浏览 器 窗口 宽度 以 i.. 举 类 望 明 月 ， 惰 头 思 的 乡 。 


体会 执行 效果 。 


本 和 设置 背景 图 片 随 内 容 卷 动 的 
" background-attachment 属性 


这 个 属性 的 使 用 格式 如 下 : 


background-attachment: scroll | fixed | local | initial | inherit 


口 scroll : 默认 值 ， 即 背景 图 会 随 页 面 卷 动 。 
口 fixed : 设置 为 这 个 值 时 ， 背 景 图 不 会 随 页 面 卷 动 。 
口 local : 这 个 值 的 使 用 效果 与 scroll 相同 ， 但 在 inframe 显示 时 ， 背 景 图 不 卷 动 。 
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程序 实例 ch14_15.html : background-attachment 的 应 用 。 这 个 实例 基本 是 重新 设计 ch14_12.html， 
但 是 多 加 了 两 行 资料 ， 以 便 执 行 结果 更 清楚 ， 卷 动 滚动 条 时 背景 图 片 将 不 随 之 卷 动 。 


dd 下 方 上 图 是 执行 初 画面 ， 下 图 是 
3 <heat 卷 动 滚动 条 时 的 效果 ， 背 景 图 不 随 之 卷 动 。 


4 <meta charset="utf-8"> 
5 <title>ch14_15.html</title> Silicon Stone Education 
6 <style> 
7 
8 


和 


h1，h2 { color:blue; text-align:center; } 


| 

body { 
9 background-image:url(seapict.gif); 
10 background-repeat:no-repeat; 
11 background-position:center center; 
位 background-attachment: fixed; | 
13 时 
14 </style> v 
15 </head> 
16 <body> 


17 <hl>Silicon Stone Education</h1> 
18 <h2>Big Data Series</h2> 

19 <h2>Data Analyst Series</h2> 

20 <h2>Photography</h2> 

21 <h2>Designing 3D Games</h2> 

22 <h2>Visual Identity</h2> 

23 <h2>Computer Knowledge Today</h2> 
24 <h2>Web Design</h2> 

站 <h2>Programming Language</h2> Programming Language 
26 </body> 

27 </htnl> 


正如 沁 背景 简易 表示 法 background 


这 是 由 14-2 节 至 14-7 节 内 容 归 纳 出 的 简易 表示 法 ， 可 以 设 定 下 列 属性 值 ; 
background-color background-image background-position background-size 


background-repeat background-attachment background-origin background-clip 


其 中 只 有 下 列 两 个 属性 值 需要 了 解 CSS 盒 模型 (Box Model) 概念 ， 见 15-5 节 。 

background-clip : 设 定 背 景 图 片 的 显示 区 域 ， 见 15-5-1 节 。 

Background-origin : 设 定 背景 图 片 显 示 的 基准 点 ， 见 15-5-2 节 。 

在 使 用 background 属性 时 ， 各 属性 值 需 用 空格 分 开 。 如 果 背 景 位 置 与 图 片 大 小 同时 存在 ， 则 彼 
此 以 “/” 符 号 隔 开 。 例 如 30px 40px/80px 80px， 表 示 图 片 距离 左边 界 30px， 距 离 上 边界 40px， 图 
片 宽度 是 80px， 高 度 是 80px ; 若 center/400px， 表 示 背 景 位 置 是 置 中 ， 图 片 宽度 是 400px。 
程序 实例 ch14_16.html : 以 background 属性 重新 设计 ch14_15.html。 下 面 只 列 出 <style> 样式 声明 
的 部 分 ， 其 余 程 序 内 容 及 执行 结果 与 ch14_15.html 相同 。 


5 <title>ch14_16.html</title> 

6 <style> 

7 h1，h2 { color:blue; text-align:center; } 

8 body { background: url(seapict.gif) no-repeat center fixed; } 
9 </style> 
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程序 实例 ch14_17.html : 以 background 属性 重新 设计 ch14_14.html， 下 面 将 只 列 出 <style> 样式 的 
声明 部 分 ， 其 余 程 序 内 容 与 执行 结果 与 ch14_14.html 相同 。 


<style> 
div.div1 { background:url(sea.jpg) no-repeat center/400px; } 
div.div2 { background:url(sea.jpg) no-repeat left/contain; } 
</style> 


习题 

1. 请 重新 设计 程序 实例 ch14_1.html， 透 明 色 为 0.0, 0.1, …, 0.9, 1， 对 于 颜色 与 句子 内 容 可 自行 发 挥 
创意 。 

2. 请 重新 设计 第 6 章 习 题 2， 对 于 内 容 请 自行 发 挥 创 意 。 

3. 请 以 至 今 所 学 的 HTML 知识 ， 设 计 一 个 竞选 班长 网 页 ， 请 多 多 列 出 自己 的 优点 ， 自 行 发 挥 创 意 。 


| 2 


完整 学 习 Box Model 


本 章 摘 要 

15-1 认识 Box Model 

15-2 ”外 边 距 的 设计 

15-3 ”内 边 距 的 设计 

15-4 ”边框 的 设计 

15-5 补充 背景 功能 background-clip 和 background-origin 属性 
15-6 设 定 盒子 阴影 的 box-shadow 属性 
15-7” 设 定 盒子 宽度 与 高 度 的 box-sizing 属性 
15-8 内 容 超出 范围 时 的 显示 方式 

15-9 ”outline 属性 

15-10， 设 定 内 容 盒子 尺寸 的 resize 属性 


HTML5+CSS3 王者 归来 


sa 认识 Box Model 


CSS 是 使 用 盒 模型 (Box Model) 来 处 理 文件 编排 的 ， 这 个 
盒子 由 内 向 外 由 内 容 盒 〈content box)、 内 边 距 (padding)、 边 框 
(border)、 外 边 距 (margin) 所 组 成 ， 可 参考 右 图 。 

其 中 内 边 距 、 边 框 、 外 边 距 默认 值 缘 是 0， 这 也 是 为 何 即使 
我 们 先前 没有 上 述 概念 ， 也 不 影响 所 有 数据 输出 的 原因 。 

口 ”内 容 盒 (content box) 

内 容 盒 即 上 图 中 央 用 白色 的 表示 区 域 ， 这 是 显示 网 页 文字 和 
图 片 的 区 域 ， 可 以 是 一 张 图 片 、 标 题 (hl~h6)、 段 落 (p)、 区 块 (div) 等 。 在 这 个 区 域 是 用 width 
(宽度 ) 和 height (高度) 属性 设 定 大 小 。 

口 “ 内 边 距 (padding) 

内 边 距 即 上 图 用 浅 灰 色 表示 的 区 域 ， 可 以 想 成 是 内 容 的 留 白 ， 在 此 指 内 容 和 边框 之 间 的 空间 。 
它 的 默认 值 是 0， 网 页 设计 时 可 以 设 定 此 空间 区 域 ， 让 背景 颜色 或 图 案 在 此 区 显示 。 

口 边框 (border) 

边框 即 上 图 用 浅黄 色 表示 的 区 域 ， 网 页 设计 时 可 以 将 此 区 域 设计 为 实 线 、 虚 线 、 特 殊 效 果 线 ， 
或 是 用 图 案 设 计 这 个 框 线 。 

口 “外边 距 (margin) 

外 边 距 即 上 图 用 浅 绿色 表示 的 区 域 ， 这 是 边框 四 周 的 留 白 区 域 ， 背 景 颜色 和 图 案 不 会 在 此 区 
域 。 这 个 区 域 默认 是 透明 〈trasparent) 的 ， 但 若是 父 元 素 有 背景 颜色 或 图 案 ， 在 此 区 可 以 看 到 。 


| 15-2 外 边 E 的 设计 


设 定 外 边 距 可 以 使 用 的 长 度 单位 可 参考 附录 D， 可 以 使 用 margin 属性 设 定 外 边 距 ， 参 见 下 图 。 


-morgin-top 


margin-right 
Content Box 


~ margin-left 


-margin-botion 
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margin-top : 上 外 边 距 。 
margin-right : 右 外 边 距 。 
margin-bottom : 下 外 边 距 。 
margin-left : 左 外 边 距 。 
margin : 上 述 4 种 属性 的 简易 表示 法 ， 使 用 时 顺序 是 顺 时 针 方 向 top、right、bottom、left。 
实例 1 : 有 一 个 设计 需要 上 外 边 距 是 20px、 右 外 边 距 是 30px、 下 外 边 距 是 40px、 左 外 边 距 是 
50px， 可 用 下 述 方法 设计 。 
和 天 攻 
margin-top:20px; 
margin-right:30px; 
margin-bottom: 40px; 
margin-left:50px; 
} 
也 可 以 使 用 简易 表示 法 margin 属性 ， 可 参考 下 列 说 明 。 
hl { margin:20px 30px 40px S50px; } 


请 留意 ， 顺 序 需 是 top、right、bottom、left， 顺 序 不 可 错误 。 设 计时 常 看 到 下 列 情 况 : 


hl { margin:20px; } /* 代表 4 个 外 边 距 皆 是 20px*/ 
hl { margin 20px 40px; } /* 代表 上 下 边 距 是 20px， 左 右边 距 是 40px*/ 
hl { margin 20px 40px 60px; } ”/* 代表 上 边 距 是 20px， 左 右边 距 是 40px， 下 边 距 是 60px*/ 
程序 实例 ch15_1.html : 使 用 标题 1 测试 外 边 距 的 应 用 。 
1 <ldoctype html> 二 2 士 
2 <html> 执行 结果 
3 <head> 
4 <meta charset="utf-8"> 
5 <titleych1s 1.html</title> 深 石 数字 科技 DeepStone 
6 <style> 
8 #exl { background-color:yellow; color:blue; } 
9 #ex2 { margin:26pxi background-color:yellow; color:blue; } 深 石 数字 科技 DeepStone 
10 #ex3 { margin:4epx; background-color:yellow; color:blue; } 


12 </head> 

13 xbody> 

14 <h1> 深 石 数字 科技 DeepSstone</h1> 

15 <h1 id="ex1"> 深 石 数字 科技 DeepStone</h1> 
16 《hl id-"ex2"> 深 石 数字 科技 Deepstone</h1> 
17 《hl id="ex3"> 深 石 数字 科技 Deepstone</h1> 
18 </body> 

19 </html> 


上 述 程 序 重点 说 明 如 下 : 

(1) 第 7 行 是 定义 <body> 背景 为 浅 灰 色 ， 第 14 行 是 使 用 此 样式 然后 输出 字符 串 。 

(2) 第 8 行 是 定义 <hl> 的 #exl 背景 为 黄色 ， 输 出 字 是 蓝 色 ， 外 边 距 是 0， 第 15 行 是 使 用 此 
样式 然后 输出 字符 串 。 

(3) 第 9 行 是 定义 <hl> 的 #ex2 背景 为 黄色 ， 输 出 字 是 蓝 色 ， 外 边 距 是 20px， 第 16 行 是 使 用 
此 样式 然后 输出 字符 串 。 

(4) 第 10 行 是 定义 <hl> 的 #ex3 背景 是 黄色 ， 输 出 字 是 蓝 色 ， 外 边 距 是 40px， 第 17 行 是 使 
用 此 样式 然后 输出 字符 串 。 
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15-2-1 <body> 的 外 边 距 


对 于 ch15_1.html 第 1、2 条 输出 内 容 而 言 ， 读 者 可 能 觉得 为 何 左边 距 已 经 设置 为 0 了 ， 而 实际 
上 与 窗口 框架 间 仍 有 距离 ? 这 段 距 离 是 8px， 这 是 系统 默认 网 页 内 容 区 <body> 与 窗口 左右 框架 的 距 
离 ， 我 们 可 以 使 用 重新 设 定 方式 将 此 区 域 设置 为 0， 这 个 行为 将 促使 第 1、2 条 内 容 与 窗口 左 框 架 没 
有 距离 。 
程序 实例 ch15_2.html : 这 个 程序 会 将 <body> 的 外 边 距 设置 为 0， 下 面 将 只 列 出 与 前 一 实例 不 同 之 处 。 


3 body { margin:@px; background-color:lightgrey; } 


比较 这 个 结果 和 前 一 个 程序 执行 结果 的 前 两 行 输出 ， 就 可 以 发 现 将 <body> 的 margin 设置 为 0 
时 ， 对 左右 边框 而 言 是 贴 着 窗口 左右 框架 的 。 


15--2-2 ”外边 距 的 合并 


当 两 个 垂直 的 外 边 距 相遇 时 ， 浏 览 器 会 自动 将 它 合 并 成 一 个 外 边 距 ， 合 并 后 将 以 较 大 的 外 边 距 作 
为 外 边 距 。 若 以 ch15_2.html 为 例 ， 第 3 条 内 容 的 外 边 距 (margin-bottom) 是 20px， 第 4 条 内 容 的 外 
边 距 (margin-top) 是 40px， 它 们 彼此 相遇 了 ， 数 据 输出 后 它们 的 外 间距 将 是 40px， 如 下 图 所 示 。 


合并 之 前 合并 之 后 


当 一 个 元 素 包含 在 另 一 个 元 素 内 时 ， 假 设 没有 内 边 距 与 边框 ， 也 可 能 造成 合并 , 如 下 图 所 示 。 
合并 之 前 合并 之 


Panes ! 


第 15 章 完整 学 习 Box Model 


假设 有 一 个 空 元 素 ， 没 有 元 素 内 容 、 没 有 内 边 距 、 没 有 边框 但 是 有 外 边 距 ， 它 们 之 间 的 合并 将 


得 到 如 下 图 所 示 的 结果 。 
合并 之 前 合并 之 后 


如 果 上 述 外 边 距 遇 上 另 一 个 外 边 距 ， 也 将 合并 ， 结 果 如 下 图 所 示 。 
合并 之 前 合并 之 后 


三 过 Lo 人 


以 上 的 合并 是 有 道理 的 ， 因 为 网 页 设计 时 ， 最 上 方 段 落 有 一 个 上 外 边 距 margin-top， 如 果 它 下 
方 的 段落 与 段落 间 设 置 了 外 边 距 ， 则 会 造成 后 续 段 落 间 的 外 边 距 是 最 上 方 元 素 上 外 边 距 margin-top 


的 两 倍 。 如 果 采 用 本 节 所 述 方法 ， 段 落 间 的 边 距 就 会 一 致 ， 如 下 图 所 示 。 
合并 前 合并 后 


外 边 距 是 合并 后 的 两 倍 与 上 、 下 外 边 距 相 等 
最 后 要 注意 的 是 ， 行 内 〈inline) 元 素 框 、 浮 动 框 与 绝对 地 址 框 不 会 合并 。 


15-2-3 外边 距 应 用 在 段落 输出 的 实例 
程序 实例 ch15_3.html : 这 个 程序 设 定 了 标题 、 段 落 与 不 同 的 外 边 距 ， 读 者 应 去 体会 整个 程序 的 执 


行 效果 。 
第 一 个 段落 样式 表 #exam1l 设 定 如 下 : 第 二 个 段落 样式 表 #exam2 设 定 如 下 : 
(1) 第 9 行 ， 外 边 距 30px。 (1) 第 15 行 ， 外 边 距 10px。 
(2) 第 10 行 ， 文 字 颜 色 蓝 色 。 (2) 第 16 行 ， 段 落 左 右 对 齐 。 
(3) 第 11 行 ， 段 落 左 右 对 齐 。 (3) 第 17 行 ， 段 落 背 景色 浅 绿色 。 


(4) 第 12 行 ， 段 落 背 景色 黄色 。 
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1 <!doctype html> 


2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <title>ch15 3.html</title> oe 

6 <style> Silicon Stone Education 
7 hl { text-align:center; } 

8 


#examl { 
9 margin:30px; 
19 co 
1 text-align: justify; 
12 background-cotor:yettow; 


13 } 

14 #exam2 { 

15 margin: 19px; 

16 text-align: justify; 

17 background-color: lightgreen; 
18 } 

19 </style> 

20 </head> 

21 <body> 


22 <hl>silicon Stone Education</hl> 

23 <p id="examl"> 

24 Silicon Stone Education is the world's leader in providing 
25 the educational-based certification exams plus the practice 
26 test solutions for the academic institutions, workforces and 
27 corporate technology markets. We have over 258+ Silicon Stone 
28 authorized testing sites in America, Asia and Europe.</p> 

29 <p id="exam2"> 

30 Silicon Stone Education is the world's leader in providing 
31 the educational-based certification exams plus the practice 
32 test solutions for the academic institutions, workforces and 
33 corporate technology markets. We have over 250+ Silicon Stone 
34 authorized testing sites ln America, Asia and Europe.</p> 

35 </body> 

36 </html> 


设 定 内 边 距 可 以 使 用 的 长 度 单位 可 
参考 附录 D， 可 以 使 用 padding 属性 设 


定 外 边 距 ， 其 定义 如 右 图 所 示 。 
padding-top : 上 内 边 距 。 
padding-right : 右 内 边 距 。 Ca ee a 
padding-left : 左 内 边 距 。 -padding-left 
padding-bottom : 下 内 边 距 。 
padding 是 上 述 4 种 属性 的 简易 表 padding-botion 


示 法 ， 使 用 时 顺序 是 顺 时 针 方 向 top、 
right、bottom、left。 
实例 1 : 有 一 个 设计 需要 上 内 边 距 是 5px、 右 内 边 距 是 10px、 下 内 边 距 是 15px、 左 内 边 距 是 
20px， 可 用 下 述 方法 设计 。 
hl 1{ 
Padding-top:5PXKX7 


padding-right:10px; 
padding-bottom:15px; 
padding-left:20px; 
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也 可 以 使 用 简易 表示 法 padding 属性 ， 可 参考 下 列 说 明 。 


hl { padding:5px 10pPx 15px 20px; } 


注意 ， 边 距 顺序 需 是 top、right、bottom、left， 不 可 有 误 。 设 计时 常 看 到 下 列 情况 : 


hl { padding:5px; } /* 代表 4 个 外 边 距 皆 是 5px*/ 

hl { padding 5px 10px; } /* 代表 上 下 外 边 距 是 5px， 左 右 外 边 距 是 10px*/ 

hl { margin 5px 10px 15pxy } /* 代表 上 外 边 距 是 5px， 左 右 外 边 距 是 10px， 下 外 边 距 是 
15px*/ 


程序 实例 ch15_4.html : 重新 设计 ch15_3.html， 这 个 程序 主要 是 13 行将 第 一 段落 的 内 间距 设 为 
30px，19 行将 第 二 段落 的 内 间距 设 为 10px， 下 面 仅 列 出 样式 设 定 程序 代码 ， 其 余 皆 与 ch15_3.html 


相同 。 
3 hl { text-align:center; } 执行 结果 
8 #examl { 
4 st | Silicon Stone Education 
10 color:blue; 
11 text~align: justify; | 
12 background-color:yellow; 
13 padding:30px; 
14 } 
15 #exam2 { 
16 margin:10px; 
17 text~align: justify; 
18 background-color: Lightgreen; | 
19 padding: 10px; 
20 } 
21 </style> 
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边框 样式 设计 重点 如 下 : 
(1) 设计 边框 样式 使 用 border-style 属性 。 
(2) 设计 边框 颜色 使 用 border-color 属性 。 
(3) 设计 边框 宽度 使 用 border-width 属性 。 
(4) 设计 边框 圆 角 使 用 border-radius 属性 。 
(5) 设计 图 样 边框 border-image 属性 。 


15-4-1 边框 样式 


可 以 将 框 线 样式 分 成 下 列 4 种 : 
border-top-style : 上 框 线 样式 。 
border-right-style : 右 框 线 样式 。 
border-bottom-style : 下 框 线 样式 。 
border-left-style : 左 框 线 样式 。 
border-style 是 框 线 样式 的 简易 表示 法 ， 说 明 如 下 : 
(1) 当 有 1 个 值 时 ， 则 这 个 值 套用 上 、 下 、 左 、 右 边框 。 
(2) 当 有 2 个 值 时 ， 则 第 1 个 值 套用 上 、 下 边框 ， 第 2 个 值 套用 左 、 右 边框 。 
(3) 当 有 3 个 值 时 ， 则 第 1 个 值 套用 上 边框 ， 第 2 个 值 套用 左 、 右 边框 ， 第 3 个 值 套用 下 
边框 。 
(4) 当 有 4 个 值 时 ， 则 分 别 套用 上 、 右 、 下 、 左 边框 。 
下 列 是 可 能 的 边框 值 (border-style) 以 及 相对 应 的 结果 画面 。 
none : 无 框 线 。 
dotted : 点 框 线 。 
dashed : 虚 框 线 。 
solid ; 实 线 框 线 ， 宽 度 由 border-width 决定 。 
groove : 3D 内 凹 框 线 ， 效 果 需 由 border-color 决定 。 
ridge : 3D 外 凸 框 线 ， 效 果 需 由 border-color 决定 。 
inset : 内 止 框 线 ， 效 果 需 由 border-color 决定 。 
outset : 外 凸 框 线 ， 效 果 需 由 border-color 决定 。 


大 
Ne 
Co 
dashed ridge | 
i Ml 
outset | 


程序 实例 ch15_5.html : 列 出 以 上 8 种 边框 效果 。 
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i 正 不 支持 groove/ridge/inset/outset 
4 meta carseteutters 功能 ， 下 列 用 Chrome 执行 。 


4 
5 <title>ch15_5.htnl</title> 
6 <style> 

7 hi#exl { text-align:center; border-style:dotted; } 
8 hi#ex2 { text-align:center; border-style:das 
9 hi#ex3 { text-align:center; border-style:soli 
1 hagex4 { text-align:center; border-stytesdoubi 


11 hl#ex5 { text-align:center; border-style:groove; 
12 hl#ex6 { text-align:center; border-style:ridge; } 
13 hi#ex7 { text-align:center; border-style:inset; } 
14 hi#ex8 { text-align:center; border-style:outset; } 
15 </style> 

16 </head> 

17 <body> 

18 <hl 1d="exl">dotted</hl> 


19 <hl id="ex2">dashed</hl> 
20 <hl id="ex3">solid</h1l> 
21 <hl id="ex4">doubte</hl> 
22 <hl id="ex5">groove</hi> 
23 <hl id="ex6">ridge</hl> 
24 <hl id="ex7">inset</h1> 
25 <hl id="ex8">outset</hl> 
26 </body> 

27 </htmnl> 


上 述 边 框 宽度 为 默认 值 ，15-4-3 节 讲 解 使 用 border-width 属性 设 定 边框 宽度 的 方法 ， 届 时 读者 
可 以 增加 边框 宽度 设 定 ， 让 效果 更 明显 。 若 读者 想 提 前 看 效果 ， 可 以 打开 本 书 附带 的 ch15_5_1.html 
文件 ， 这 个 程序 已 经 将 边框 宽度 设 定 为 10px。 
程序 实例 ch15_6.html : 以 加 上 外 边框 的 方式 重新 设计 ch12 2.html。 标 题 的 外 边框 样式 是 ridge 
(第 12 行 设 定 )， 文 章 段落 的 外 边框 样式 是 solid (第 20 行 设 定 )。 


1 <ldoctype html> 23 Chena Hot Spring 温泉 渡 假 村 。 旅 游 期 间 尝试 开 熙 直达 北极 海 (Arctic Ocean) 
2 <html> 29 ， 第 一 次 车 子 在 订 天 雪 地 打滑 ， 撞 山 避 失败 而 返 。 第 二 次 碰 上 暴风 轨 ， 再 度 失 

3 <xheed> 39 败 。2967 年 2 月 再 度 前 往 ， 这 次 坐 机 直达 阿拉 斯 加 最 北城 市 ， 终 于 抵达 北 概 海 。 
4 <neta charset="utf-8"> 31 </p> 

5 <titleych1S_6.html</title> 32 </body> 

5 <style> 33 </htnl> 

7 hl { 

8 text-align:center; 

9 nergin:20px; 

19 background-color: lightgray; 本 程序 使 用 Chrome 执行 。 

11 color:blue; 

12 border-style:ridge; 

-i | 我 的 旅游 经 历 
14 #content { 本 工 /站 

15 nargin:10px; 

16 text-align: justify; 

17 text-indent:32px; 

18 background-color:yellow; 

19 padding:10px; 

29 borden-style: solid; 

21 本 

22 。 </styley 

23 </head> 

24 <body> - 


25 <h1> 我 的 旅 满 经 历 </h1> 
26 <p id="content">2966 年 2 月 为 了 享受 边 泡 温泉 边 看 极光 (Northern Light). 
27 一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska) ， 再 开车 往 北 至 接近 北极 圈 的 


程序 实例 ch15_7.html : 重新 设计 程序 实例 ch7_1.html， 为 图 片 加 上 边框 。 


1 <ldoctype html> 11 <body> 

2 <html> 12 xhl>silicon Stone Education</h1> 

3 <head> 13 <p? 图 片 高 是 16epx&nbsp;&nbsp; 图 片 宽 是 158px< /p> 

4 <meta charset="utf-8"> 14 «img id="fig1" src="sselogo.jpg" height="100" width="150"> 
5 <title>ch15 7.html</title> 15 <p> 使 用 默认 图 片 大 小 </p> 

6 xstyle> 16 <img id="fig2” src="sselogo.jpg”> 

芭 #fig1 { border-style:double; } 17 </body> 

8 #fig2 { border-style:outset; } 18 </html> 

9 </style> 


19 </head> 
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本 程序 使 用 Chrome 执行 。 


Silicon Stone Education 


15-4-2 边框 色彩 


可 以 将 框 线 色彩 分 成 下 列 4 种 : 
border-top-color : 上 框 线 色彩 。 
border-right-color : 右 框 线 色彩 。 
border-bottom-color : 下 框 线 色彩 。 
border-left-color : 左 框 线 色 彩 。 
border-color 是 框 线 色 彩 的 简易 表示 法 ， 说 明 如 下 : 
(1) 当 有 1 个 值 时 ， 则 这 个 值 套用 上 、 下 、 左 、 右 边框 色彩 。 
(2) 当 有 2 个 值 时 ， 则 第 1 个 值 套用 上 、 下 边框 色彩 ， 第 2 个 值 套 用 左 、 右 边框 色彩 。 
(3) 当 有 3 个 值 时 ， 则 第 1 个 值 套用 上 边框 色彩 ， 第 2 个 值 套用 左 、 右 边框 色彩 ， 第 3 个 值 套 
用 下 边框 色彩 。 
(4) 当 有 4 个 值 时 ， 则 分 别 套用 上 、 右 、 下 、 左 边框 色彩 。 
程序 实例 ch15_8.html : 重新 设计 ch15_7.html， 设 定 第 一 个 边框 色彩 是 绿色 ， 第 二 个 边框 色彩 是 蓝 
色 。 这 个 程序 笔者 将 只 列 出 与 ch15_7.html 程序 代码 不 同 之 处 。 


6 <style> 行 疆 /二 
7 #figl { border-style:double; border-color:green; } PE 林 程序 使 用 Chrome 执行 。 
8 #fig2 { border-style:outset; border-color:yellow; } 

9 </style> 


Silicon Stone Education 


图 片 高 是 I00px 疼 片 定 是 1Sopx 


EAT 


使 用 默认 图 片 大 
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15-4-3 边框 宽度 


可 以 将 框 线 宽度 分 成 下 列 4 种 : 
border-top-width : 上 框 线 宽度 。 
border-right-width : 右 框 线 宽度 。 
border-bottom-width : 下 框 线 宽度 。 
border-left-width : 左 框 线 宽度 。 
border-width 是 框 线 宽度 的 简易 表示 法 ， 说 明 如 下 : 
(1) 当 有 1 个 值 时 ， 则 这 个 值 套用 上 、 下 、 左 、 右 边框 宽度 。 
(2) 当 有 2 个 值 时 ， 则 第 1 个 值 套用 上 、 下 边框 宽度 。 第 2 个 值 套用 左 、 右 边框 宽度 。 
(3) 当 有 3 个 值 时 ， 则 第 1 个 值 套用 上 边框 宽度 ， 第 2 个 值 套用 左 、 右 边框 宽度 ， 第 3 个 值 套 
用 下 边框 宽度 。 
(4) 当 有 4 个 值 时 ， 则 分 别 套用 上 、 右 、 下 、 左 边框 宽度 。 
下 列 是 可 能 的 边框 值 : 
thin : 细 框 线 。 
medium : 这 是 默认 值 ， 中 等 框 线 。 
thick : 粗 框 线 。 
length : 设 定 边框 宽度 ， 可 以 使 用 的 长 度 单位 参考 附录 D。 
程序 实例 ch15_9.html : 重新 设计 ch7_11.html， 第 一 张 图 改 成 实 线 solid， 宽 度 是 thin， 可 参考 第 7 
行 ; 第 二 张 图 改 成 实 线 solid， 宽 度 是 medium， 可 参考 第 8 行 ; 第 三 张 图 改 成 inset， 宽 度 是 thick， 
色彩 是 黄色 ,可 参考 第 9 行 ; 第 四 张 图 改 成 outset， 宽 度 是 10px， 色 彩 是 黄色 ， 可 参考 第 10 行 。 


chocome ey 本 程序 使 用 Chrome 执 行 。 


1 
2 
3 chead> 

4 4meta charset="utf-8"> 

5 etitleych15_9.htnlc/titley 
5 <style> 我 游 

7 #figl { border-style:solid; border-width:thin; } 的 旅游 经 验 
8 #fig2 { border-style:solid; border-width:medium; } 

日 fi83 { border-stylatinseti bordar-width:thick; borden-colon:yellow; } 
19 #fig4 { border-style:outset; border-width:19px; border-color:yellow; } 
11 4/styley 

12 </head> 

13 <body> 

14 <hi> 我 的 江 游 经 驻 ¢/hi> 

45 xpy 

15 黄石 国家 公园 cimg id-"figl* snc-"yelloustone. ipg" width="286">&nbsp;&nbsp; 

17 拉 什 莫 尔 山 fimg id="fig2" src="rushmore, ipe” width="198"> 

18 </p> 

19 <p> 

29 ine dn"figa” sre-"mpuntain jog” width="100 > 高 山 市 8nbsp;8&nbsp; 

21 <ing id-"fig4" src="village.ong” width="286"> 合 党 村 

22 </p> 

23 </body> 

24 </htnl> 


15-4-4 ”边框 属性 的 简易 表示 法 
15-4-1 节 至 15-4-3 节 有 关 边 框 线 属 性 的 表示 法 ， 可 以 用 下 列 方式 表达 : 


border-top: border-top-style border-top-color border-top-width 
border-right: border-right-style border-right-color border-right-width 
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border-bottom: border-bottom-style border-bottom-color border-bottom-width 

border-left: border-left-style border-left-color border-left-width 

border : border-style border-color border-width 

上 述 表 达 方 式 分 别 使 用 了 border 属性 简化 的 border-style 边框 线 样式 、border-color 边框 线 色 
彩 、border-width 边框 线 宽度 。 这 种 方式 也 可 以 应 用 在 border-top、border-right、border-bottom 和 
border-left 上 。 
程序 实例 ch15_10.html : 以 border 属性 重新 设计 ch15 9.html， 下 面 将 只 列 出 本 例 与 ch15_9.html 


样式 表单 不 同 之 处 。 

6 <style> 

7 #figl { border:solid thin; } 

8 #fig2 { border:solid medium; } 

9 #fig3 { border:inset thick yellow; } 
19 #fig4 { border:outset 19px yellow; } 


11 </style> 


执行 结 与 ch15_9.html 相同 。 


15-4-5 圆 角 边 框 


这 个 属性 用 于 设 定 圆 角 边框 。 
口 border-top-left-radius : 长 度 1( 或 百 方 比 ) 长 度 2( 或 百 方 比 ) 


可 以 设 定 左上 方 的 圆 角 边 框 ， 如 果 只 有 1 个 长 度 ， 则 表示 是 圆 角 ; 如 果 有 2 个 长 度 ， 则 第 1 个 
长 度 是 水 平 轴 半径 ， 第 2 个 长 度 是 垂直 轴 半 径 ， 长 度 单位 可 以 参考 附录 D。 如 果 是 百分比 ， 则 第 1 
个 代表 以 区 块 宽度 的 百分比 为 半径 ， 第 2 个 是 以 区 块 高 度 的 百分比 为 半径 。 


口 border-top-right-radius : 长 度 1( 或 百 方 比 ) 长 度 2( 或 百 方 比 ) 
可 以 设 定 右上 方 的 圆 角 边框 ， 用 法 与 border-top-left-radius 相同 。 

口 border-bottom-right-radius : 长 度 1( 或 百 方 比 ) 长 度 2( 或 百 方 比 ) 
可 以 设 定 右 下 方 的 圆 角 边框 ， 用 法 与 border-top-left-radius 相同 。 

口 border-bottom-left-radius : 长 度 1( 或 百 方 比 ) 长 度 2( 或 百 方 比 ) 
可 以 设 定 左 下 方 的 圆 角 边框 ， 用 法 与 border-top-left-radius 相同 。 

口 border-radius : 长 度 1 长 度 2 长 度 3 长 度 4 


这 是 上 述 4 种 属性 的 简易 表示 法 ， 但 是 只 能 将 4 个 角 设 为 圆 角 。 如 果 只 有 1 个 数值 ， 则 代表 4 
个 角 皆 以 此 数值 当 作 圆 角 半 径 ; 如 果 有 2 个 数值 ， 则 第 1 个 数值 套用 在 左上 角 和 右 下 角 ， 第 2 个 
数值 套用 在 右上 角 和 左下 角 ; 如 果 有 3 个 数值 ， 则 第 1 个 数值 套用 在 左上 角 ， 第 2 个 数值 套用 
在 右上 角 和 左下 角 ， 第 3 个 数值 套用 在 右 下 角 ; 如 果 有 4 个 数值 ， 则 依次 套用 在 左上 、 右 上 、 
右 下 、 左 下 角 。 
程序 实例 ch15_11.html : 设计 圆 角 边框 ， 第 一 个 图 片 圆 角 边 框 半径 是 20px， 在 第 7 行 设 定 ; 第 二 
个 图 片 左 上 、 右 下 圆 角 边框 半径 是 20px， 右 上 、 左 下 圆 角 边框 半径 是 50px， 在 第 8 行 设 定 。 
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1 cidoctype Ftals 执行 结果 


2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <titleych15 11.html¢/title> 

6 <style> 

7 #fig1 { border:double Spx green; border-radius:20px;} 
3 4#fig2 { borderssolid 5px Brayj border-radius; 29px SOpx;} 
a </style> 

19 </head> 

11 <body> 

12 《p> 左边 图 片 高 是 eepx&nbsp; 图 片 完 是 156px 

13 &nbsp nbsp; 右 边 使 用 默认 图 片 大 小 </p> 

14 《img id-"fig1"” src="sselogo. ips" height-"190" width-"159"> 
15 <img id="fig2" src="sselogo. jpg”> 

15 </body> 

17 </htnl> 


左边 图 片 高 是 100px 图 片 宣 是 130px 右边 使 用 默认 图 片 大 小 


程序 实例 ch15_12.html : 设计 椭圆 的 边框 。 这 个 程序 输出 的 图 形 左 上 角 和 右 下 角 是 圆 角 ， 半 径 是 
30px， 分 别 在 第 9 和 11 行 设 定 ; 图 形 右上 角 和 左下 角 是 椭圆 弧 形 ， 水 平 轴 的 半径 是 60px， 垂 直 轴 
的 半径 是 100px， 分 别 在 第 10、12 行 设 定 。 


<!doctype html> 18 </body> 


1 
2 <html> 19 </html> 

3 <head> 

4 <meta charset="utf-8"> 5 

5 <title>ch15_12.html</title> 执行 结果 

6 <style> 

7 #fig { 

8 border:double Spx green; 

9 border-top-left-radius:38px; 

10 border-top-right-radius:60px 100px; 

11 border-botton-right-radius:38px; 

12 border-bottom-teft-radius:69px 190px; 

13 } 

14 </style> 

15 </head> 

16 <body> 

17 <img id="fig" src="antarctica, jpg” width="499px"> 


程序 实例 ch15_13.html : 将 圆 角 应 用 在 文字 框 。 这 个 程序 基本 上 是 重新 设计 ch15_6.html， 下 面 将 


只 列 出 两 者 不 同 之 CSS 代码 。 

6 <style> 23 } 

hi{ 24 </style> 

8 text-align: center; 

9 margin;29pX; FE 

19 background-color:lightgray; 二 

1 color:blue; 执行 结果 
2 border-style:ridge; 

13 border-radius:28px;  /* 图 角 半 径 是 :26px */ 

-J 人 我 的 旅游 经 历 
15 #content { 

16 margin:19px; 

a text-align: justify; 

18 text-indent:32px; 

19 background-color:yellow; 


22 border-radius:56px;  /*” 较 角 半 径 是 ;5epx */ 


15-4-6 设计 图 案 边 杠 


图 案 边 框 也 是 一 个 新 概念 ， 它 是 用 一 张 图 片 作 为 边框 的 图 案 ， 以 取代 border-style 属性 。 正 浏览 
器 对 border-image 并 没有 很 好 地 支持 ， 建 议 使 用 Firefox 或 Chrome 浏览 器 执行 接 下 来 的 实例 。 设 计 
图 案 边 框 时 ， 常 发 生 的 错误 是 漏 了 在 样式 表 内 声明 border 属性 值 ， 这 是 必要 的 ， 若 没有 设 定 边框 ， 
则 默认 边框 宽度 是 0， 所 设计 的 图 案 边 框 将 无 法 显示 。 以 下 是 示范 设 定 : 
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border:50px solid; 


指定 图 案 边 框 的 源 文件 border-image-source 

这 个 属性 用 于 将 一 个 图 案 套 用 到 边框 ， 它 的 使 用 格式 如 下 : 
border-image-source: 图 案 的 URL 

设 定 边框 图 案 分 割 border-image-slice 

图 案 边框 可 被 分 割 成 9 块 ， 参考 下 图 ， 其 中 中 间 区 块 是 内 容 显示 区 。 


可 以 由 这 个 属性 设 定 分 割 区 上 边 、 右 边 、 下 边 、 左 边 到 内 容 的 距离 ， 它 的 使 用 格式 如 下 : 
border-image-slice: 长 度 | fill | initial | inherit; 
口 长 度 


(1) 当 有 1 个 值 时 ， 则 这 个 值 套用 上 、 下 、 左 、 右 边 的 距离 。 

(2) 当 有 2 个 值 时 ， 则 第 1 个 值 套用 上 、 下 边 距离 ， 第 2 个 值 套用 左 、 右 边 距离 。 

(3) 当 有 3 个 值 时 ， 则 第 1 个 值 套用 上 边 距 离 ， 第 2 个 值 套用 左 、 右 边 距离 ， 第 3 个 值 套用 下 
边 距离 。 

(4) 当 有 4 个 值 时 ， 则 分 别 套用 上 、 右 、 下 、 左 边 距 离 。 
口 % 

使 用 百分比 设 定 长 度 。 
口 “各 


如 果 指 定 为 fll， 则 原先 套用 在 边框 图 案 中 央 的 内 容 就 会 显示 出 来 。 
程序 实例 ch15_14.html : 设计 一 个 图 案 边 框 ， 边 框 外 围 至 内 容 区 的 距离 是 50px。 本 程序 所 用 的 图 
案 borderfig.jpg 如 下 所 示 。 
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程序 代码 如 下 : 
1 <ldoctype html> 22 ， 第 一 次 车 子 在 冰 天 扣 地 打滑 ， 接 山 荆 失 败 而 返 。 第 二 次 空 上 骏 风 于 ， 再 度 失 
2 <html> 23 败 。2867 年 2 月 再 度 新 往 ， 这 次 坐 飞机 直达 阿拉 斯 加 最 北城 市 ， 终 于 抵达 北极 海 
3 <head> 24 </p> 
4 <meta charset="utf-8"> 25 </body> 
过 <title>ch15 14.html</title> 26 </html> 
6 <style 
7 #boximage { 
8 marginy59px3 执行 结果 
9 padding: 10px; 
10 text-indent ;32px; 
11 text-align: justify; 
12 border: sepx solid; 
13 border-image-source: url(borderfig.jpe); | 2 人 ee 
14 border-image-slice: 50; i 和 对 站 扳 轩 的 A 
35 } 村 。 旅游 期间 尝试 开车 让 达 北海 (Are Ocean) ， 
16 </style> 次 车 子 ， 返 。 二 
17 </head> 时， 再 度 失败 。2007 年 ?月 再 度 前 往 ， 

六 和 斯 加 最 北城 市 ， 终 于 抵达 机 洒 ， 


证 ne 为 了 廓 受 边 泡 温 泉 边 看 极光 (Northern Light)， 
28 一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 吉 的 

21 Chena Hot Springs 温 泉 渡 假 村 。 旅 游 期 同 尝试 开车 直达 北极 海 (Arctic Ocean) 
程序 实例 ch15_15.html : 测试 border-image-slice 的 属性 值 fill。 这 个 程序 是 在 程序 第 14 行 增加 属 
性 值 fl1， 读 者 可 以 了 解 其 与 ch15_14.html 的 差异 。 下 面 将 只 列 出 第 14 行 的 内 容 。 


14 border-image-slice:50 fill; 


设 定 图 案 边 框 的 宽度 border-image-width 

它 的 使 用 格式 如 下 : 

border-image-width: 长 度 单位 ( 百分比 ) | 数值 | auto 
口 长度 单 位 (百分比 ) 

可 使 用 1~4 个 长 度 单位 。 如 果 只 有 1 个 长 度 单位 ， 则 可 套用 在 4 边 ; 如 果 有 2 个 长 度 单位 ， 
则 第 1 个 可 套用 在 上 下 边 ， 第 2 个 可 套用 在 左 、 右 边 ; 如 果 有 3 个 长 度 单 位 ， 则 第 1 个 可 套用 在 
上 边 ， 第 2 个 可 套用 在 左 、 右 边 ， 第 3 个 可 套用 在 下 边 ; 如 果 有 4 个 长 度 单 位 ， 则 可 依次 套用 在 


上 、 右 、 下 、 左 边 。 
口 数值 

用 倍数 的 方式 设 定 边框 的 宽度 ， 默 认 值 是 1。 也 可 以 指定 1~4 个 数值 ， 应 用 方式 与 长 度 单位 的 
相同 。 
DD auto 

这 个 值 和 border-image-slice 所 指定 的 数值 相同 。 如 果 没 有 border-image-slice 则 使 用 border-width 
属性 值 。 
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程序 实例 ch15_16.html : 设 定 上 下 边框 宽度 是 50px， 左 右边 框 宽度 是 30px。 下 面 将 只 列 出 本 例 与 
ch15_15.html 程序 代码 不 同 之 处 。 


14 border-image-slice:58 fill; 
15 border-image-~width:59px 30px; 
执行 结果 


程序 实例 ch15_17.html : 重新 设计 ch15_16.html， 设 定 border-image-width 属性 值 是 “12”。 下 面 
是 重新 设计 的 第 15 行内 容 。 


15 border-image-width:1 2; 


加 长 图 案 边 框 的 区 域 border-image-outset 
它 的 使 用 格式 如 下 : 
border-image-outset: 长 度 单位 ( 百分比 ) | 数值 


口 长度 单位 (百分比 ) 

设 定 加 长 的 距离 ， 可 使 用 1~4 个 长 度 单位 ， 如 果 只 有 1 个 长 度 单位 ， 则 可 套用 在 4 边 ; 如 果 有 
2 个 长 度 单位 ， 则 第 1 个 可 套用 在 上 、 下 边 ， 第 2 个 可 套用 在 左 、 右 边 ; 如 果 有 3 个 长 度 单位 ， 则 
第 1 个 可 套用 在 上 边 ， 第 2 个 可 套用 在 左 、 右 边 ， 第 3 个 可 套用 在 下 边 ; 如 果 有 4 个 长 度 单位 ， 则 
可 分 别 套用 在 上 、 右 、 下 、 左 边 。 
口 数值 
用 倍数 方式 设 定 宽度 ， 默 认 值 是 1。 它 也 可 以 指定 1~4 个 数值 ， 应 用 方式 与 长 度 单位 的 相同 。 


程序 实例 ch15_18.html : 重新 设计 程序 ch15_ 
15.html， 将 宽度 和 高 度 加 长 30px。 


1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta chanset="utf-8"> 


第 15 章 完整 学 习 Box Model 


32 </p> 

33 <p id="boximage2">2885 年 2 月 为 了 享受 边 泡 温泉 边 看 极光 (Northern Light)， 
34 一 人 独自 坐 习 机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 圈 的 

35 Chena Hot 5prings 温 泉 滚 假 村 。 

35 </p> 

37 </body> 

38 </htnl> 


超出 部 分 的 图 案 自动 缩小 。 


5 <title>ch15 18.html¢/title> 
6 <style> 一 
7 Se { 执行 结果 
8 margin: 50px; 
9 padding: 19px; 
19 text-indent:32px; 
11 text -align:justify; 
12 border: 5epx solid; 
13 border-image-source:url(borderfig. jpg); 
14 border-image-slice:50 fill; 
15 } 
16 #boximage2 { 
17 margin: 50px; 
18 padding:10px; 
19 text-indent:32px; 
29 text-align:justify; 
21 border: Sepx solid; 
22 border -image-source:url(borderfig. jpg); 
23 border-image-slice:58 fill; 
24 border-image-outset :39px; 
25 } 
26 </style> 
27 </head> 
28 <body> 
29 <p id="boximage1">2886 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 (Northern Light)， 
38 一 人 独自 坐 飞 机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 轿 的 
31 Chena Hot springs 温 泉 扩 假 村 。 
设 定 边框 中 填充 的 图 案 的 重复 显示 方式 border-image-repeat 
它 的 使 用 格式 如 下 : 
border-image-repeat: stretch | repeat | round | space 
OD stretch 
默认 值 ， 图 案 将 被 扩展 。 
ODO repeat 
设 定 为 这 个 值 时 ， 配 合 边 框 ， 图 案 重复 显示 ， 超 出 部 分 裁剪 掉 。 
D round 
设 定 为 这 个 值 时 ， 配 合 边框 ， 图 案 重 复 显示 ， 
口 space 


设 定 为 这 个 值 时， 配合 边 框 ， 图 案 重复 显示 ， 
别 图 案 区 间 。 


如 果 超 出 边框 无 法 显示 ， 则 将 多 余 空 间 分 配 到 个 


程序 实例 ch15_19.html : stretch、repeat、round 属性 值 的 应 用 ， 程 


序 将 分 别 在 第 10、15、20 行 设 定 这 3 个 属性 值 。 
框图 片 borderfig2.jpg 如 右 图 所 示 。 


本 程序 所 使 用 的 边 


| 
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下 面 是 程序 代码 : 


1 xidoctype htnl> 


2 <htnl> 
3 <head> 
4 <meta charset="utf-8"> 
5 <titleych1s 19.htnl</title> 
6 <styley 
6 #boxinagel { 
Margin: 50px; pedding:15px; border:5epx solid; 
9 border-inage-source:url(borderfig2.jpg); borden-image-slice:65; 
19 border-image-repeat:stretchj 
11 } 
12 #boxinage2 { 
3 nargin: Sepx; padding:15px; border:5apx solid; 
14 bonder-image-source:url(borderfig2.jpg); border-image-slice:65; 
15 border-insge-repeet: repeat; 
16 } 
17 tboxinage3 { 
18 margin: 50px; padding:15px; border:50px solid; 
19 border-imsge-source:url(borderfig2.jP8); border-image-slice:65; 
20 border-inage-repeat:round; 
21 } 
22 xjstyley 
23 </head> 


boximage1">stretcb 属 性 值 ; 一 人 独自 坐 机 至 阿拉 斯 加 (Alaska)。</p> 
boximage2">repeat 属 性 值 :一 人 独自 坐 《机 至 阿拉 斯 加 (Alaska)。</p> 
boxinage3">round 属 性 值 :一 人 独自 坐 飞 机 至 阿拉 斯 加 (Alaska)。</p> 


曙 eteh 民 性 入 一 人 名 自生 飞机 至 拉 新 加 (Alaska) 


人 


repeat 属性 管 :一 人 独自 于 飞机 至 阅 拉 斯 DAlaska 


O660686668688688O 


ound 属 性 竹 : 一 人 名 各 从 飞机 持 亲 拉 产 加 (Alaska) - 


O066666666666466606O 、 


28 </body> 
29 </html> 
简易 表示 法 border-image 
使 用 这 种 方法 可 以 一 次 代表 下 列 前 面 介绍 过 的 表示 法 : 
border-image-source 图 片 的 URL 
border-image-slice 图 片 分 割 的 位 置 
border-image-width 边框 的 宽度 
border-image-outset 图 片 加 长 的 距离 
border-image-repeat 边框 的 重复 方式 


使 用 时 各 属性 值 间 需 空 一 格 ，border-image-width 和 border-image-out 如 果 同 时 存在 ， 则 它们 之 
间 需 用 “/” 隔 开 。 如 果 上 述 任何 属性 值 被 省 略 ， 则 套用 初始 值 或 默认 值 。 对 于 border-image-slice、 
border-image-width、border-image-outset， 如 果 只 有 1 个 值 ， 则 套用 在 4 边 ; 如 果 有 2 个 值 ， 则 第 1 
个 可 套用 在 上 、 下 边 ， 第 2 个 可 套用 在 左 、 右 边 ; 如 果 有 3 个 值 ， 则 第 1 个 可 套用 在 上 边 ， 第 2 个 
可 套用 在 左 、 右 边 ， 第 3 个 可 套用 在 下 边 ; 如 果 有 4 个 值 ， 则 可 分 别 套用 在 上 、 右 、 下 、 左 边 。 
程序 实例 ch15_20.html : 以 border-image 观念 ， 令 border-image-repeat 属性 值 为 stretch， 重 新 设计 


ch15_19.html。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>ch15_ 20.html</title> 

6 <style> 

7 #boximagel { 

8 margin:56px; padding:15px; border:58px solid; 
9 border-image:url(borderfig2.jpg)65 stretch; 
19 } 

11 «</style> 

12 </head> 

13 <body> 

14 xp id="boximage1"> 一 人 独自 坐 飞 机 至 阿拉 斯 加 (Alaska)。</p> 
15 </body> 

16 </html> 


EE 


一 人 独 壬 举 飞 机 至 河 拉 斯 加 (Alaska) < 


is > 
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中 痢 潮 补充 背景 功能 background-clip 和 
back ground-origin 属性 


这 两 个 功能 原本 属于 上 一 章 的 主题 ， 但 是 因 牵 涉 到 盒 模型 的 概念 ， 所 以 移 至 本 节 说 明 。 


15-5-1 设 定 背景 显示 范围 的 backgro 


und-clip 属性 


此 处 所 谓 的 背景 指 的 是 背影 颜色 和 图 片 。background-clip 的 使 用 格式 如 下 : 


background-clip: border-box | padding-box | 


| 
口 


content-box; 


border-box : 设 定 背景 显示 在 边框 盒子 之 内 的 区 域 。 
padding-box : 设 定 背景 显示 在 内 边 距 盒子 之 内 的 区 域 。 


口 content-box : 设 定 背 景 显示 在 内 容 盒子 之 内 的 区 域 。 


程序 实例 ch15_21.html : 显示 背景 范围 的 应 用 。 这 个 程序 笔者 使 用 了 3 个 属性 值 ， 第 9 行 设 定 第 
一 个 画面 输出 的 属性 值 是 border-box， 第 13 行 设 定 第 二 个 画面 输出 的 属性 值 是 padding-box， 第 17 


行 设 定 第 三 个 画面 输出 的 属性 值 是 content-box。 


1 《ldoctype html> 
2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 
号 <title>ch15 21.html</title> 
6 <*style> 
2 
9 


#borderbox { 
margin:30px; border:10px solid rgba(255,255,8,9,5); padding;15px3 

9 background: url(antarctica. jpg) border-box; 
19 } 
11 #paddingbox { 
12 margin;38px; border:10px solid rgba(255,255,B,9.5); padding:15px3 
13 background:url(antarctica.jpg) padding-box; 
14 } 
15 #contentbox { 
16 margin:30px; border:10px solid rgba(255,255,9,9,5); padding;15px3 
17 background:url(antarctica.jpg) content-box; 


} 
19 </style> 
28 </head> 
21 <body> 


22 <div id-"borderbox"> 一 个 人 的 极 境 旅行 南极 大 陆 /北极 海 4/div> 
23 <diy id="paddingbox"> 一 个 人 的 极 境 旅行 南极 大 陆 /北极 海 c/divy 
24 <div id-"contentbox") 一 个 人 的 极 境 旅行 南极 大 陆 /北极 海 </div> 
25 </body> 
25 </html> 


上 例 中 边框 (border〉 皆 是 黄色 带 有 0.5 透明 的 效果 ， 第 一 张 图 由 于 背景 图 从 此 处 开始 显示 ， 使 


得 颜色 重 迭 ， 因 此 显示 出 了 不 同 效果 的 边框 色彩 。 


15-5-2 ， 设 定 背 景 图 案 的 基准 位 置 的 background-origin 属性 


这 个 属性 的 使 用 格式 如 下 : 


background-origin: border-box | padding-box | content-box; 


口 border-box 


设 定 边 框 盒子 左上 角 是 基准 点 ， 图 片 左上 角 在 此 点 。 此 点 也 可 称 (0.0%,0.0%)， 右 下 角 为 


(100%,100% )。 


HTML5+CSS3 王者 归来 


OD padding-box 
设 定 内 边 距 盒子 左上 角 是 基准 点 ， 图 片 左 上 角 在 此 点 。 此 点 也 可 称 (0.0%,0.0%)， 右 下 角 为 
(100%,100% )。 


OD content-box 
设 定 内 容 盒子 左上 角 是 基准 点 ， 图 片 左上 角 在 此 点 。 此 点 也 可 称 (0.0%.0.0%)， 右 下 角 为 
(100%%,100% )。 
程序 实例 ch15_22.html : 将 图 片 starl.gif 分 别 从 border-box、padding-box、content-box 位 置 开始 放置 。 


1 doctype hm 执行 结果 


4 <neta charset="utf-g"> 
5 <tittezch15_22.htmt</titte> 
6 <style> 
7 
8 


#borderbox { 

margin: 30px; border:10px solid rgba(255,255,0,0.5); padding:15px; 
9 background:url(starl.gif) border-box no-repeat; 
18 } » 
11 #paddingbox { 人 
2 margin: 30px; border:10px solid rgba(255,255,9,9.5); padding:15px; 
13 background:url(starl.gif) padding-box no-repeat; 
14 } 
16 margin: 30px; border:19px solid rgba(255,255,9,9.5); padding:15px; v 
17 background:url(starl.gif) content-box No-repeat; 
18 » 
19 </style> 
20 </head> 
21 <body> 


22 <div id="borderbox">border-box</div> 
23 <div id="paddingbox">padding-box</div> 
24 <div id="contentbox">content-box</div> 
25 </body> 
26 </htmt> 


| 15-6 | 设 定 盒 子 阴影 的 box-shadow 属性 


这 个 属性 可 以 设 定 盒子 的 阴影 属性 ， 它 的 使 用 格式 如 下 : 


box-shadow: h-shadow | v-shadow | blur | spread | color | inset; 
每 个 阴影 由 2~4 个 长 度 值 、 颜 色 以 及 inset 选项 组 成 ， 若 长 度数 值 省 略 则 是 0。 
口 _h-shadow 
这 是 必需 有 的 数值 ， 代 表 水 平 阴影 向 右 延 伸 的 数量 ， 负 值 则 是 向 左 延 伸 。 
DOD v-shadow 
这 是 必需 有 的 数值 ， 代 表 垂直 阴影 向 下 延伸 的 数量 ， 负 值 则 是 向 上 延伸。 
口 blur 
模糊 长 度 。 如 果 只 有 1 个 数值 ， 则 代表 模糊 的 范围 ， 如 果 有 2 个 数值 ， 则 模糊 将 向 四 周 扩散 。 
口 颜色 
阴影 颜色 ， 若 省 略 则 使 用 浏览 器 默认 值 。 
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口 inset 


若 设 定 这 个 值 ， 表 示 有 内 侧 阴 影 。 
程序 实例 ch15_23.html : 盒子 阴影 的 应 用 。 这 个 程序 将 建立 4 个 含 阴影 的 盒子 ， 前 3 个 阴影 颜色 
是 蓝 色 ， 长 度 皆 是 10px， 向 右 向 下 ， 第 1 个 阴影 没有 模糊 ; 第 2 个 阴影 模糊 值 是 10px ; 第 3 个 阴影 
再 向 四 周 扩散 10px ; 第 4 个 盒子 ， 因 为 有 inset 属性 值 ， 所 以 是 内 侧 阴影 。 第 4 个 盒子 的 内 容 是 图 
片 ， 是 为 告诉 读者 盒子 可 以 放 文字 也 可 以 放 图 片 。 

1 
4 ee charset="utf-8"> 


5 <title>ch15_23,.html</title> 
6 <style> 
7 
8 


div{ 
margin:30px; 

9 border:3px solid; 
19 padding: 15px; 
EV width:200px; 
12 height:100px; 
13 background-color:yellow; 
14 } 
15 #box1 { box-shadow:blue 19px 19px; } 
16 #box2 { box-shadow:blue 19px 10px 19px; } 
Ey #box3 { box-shadow:blue 10px 190px 19px 10px; } 
18 #box4 { box-shadow:gray 10px 19px Spx inset; } 
19 </style> 
20 </head> 
21 <body> 


22 <div id="box1">DeepStone</div> 

23 <div id="box2">DeepStone</div> 

24 <div id="box3">DeepStone</div> 

25 <div id="box4"><img src="starl,.gif"></div> 
26 </body> 

27 </html> 


使 用 box-shadow 属性 时 ， 也 可 以 指定 多 组 阴影 数据 ， 彼 此 可 以 用 “,” 隔 开 。 在 浏览 器 显示 时 
先 设 定 的 阴影 将 在 最 上 层 。 
程序 实例 ch15_23_1.html : 使 用 两 组 数据 设计 阴影 ， 第 一 组 数据 阴影 是 绿色 ， 读 者 可 以 仔细 看 执 
行 结果 ， 绿 色 阴 影 在 上 的 方式 是 可 以 清楚 看 到 的 。 


1 <!doctype html> 
2 <html> 执行 结果 


3 <head> 


4 <meta charset="utf-8"> 

5 <title>ch15_23_1.html</title> 
6 <style> 

7 div { 

8 margin:30px; 

9 border:3px solid; 

10 padding: 15px; 

了 width:200px; 

12 height:100px; 

13 background-color:yellow; 
14 } 

15 #box1 { box-shadow:green Spx Spx, blue 19px 19px 19px;} 
16 </style> 

17 </head> 

18 <body> 

19 <div id="box1">DeepStone</div> 
20 </body> 


21 </html> 


HTML5+CSS3 王者 归来 


| 15-7 | 设 定 盒子 宽度 与 高 度 的 box-sizing 属性 


这 个 属性 可 以 直接 设 定 盒子 的 宽度 和 高 度 ， 它 的 使 用 格式 如 下 : 
box-sizing: content-box | padding-box | border-box; 
DO content-box 
默认 值 ， 设 定 内 容 盒子 区 的 宽度 和 高 度 。 
DO padding-box 
内 边 距 盒子 区 〈 包 含 内 边 距 和 内 容 盒子 ) 的 宽度 和 高 度 。 
口 border-box 


边框 盒子 区 〈 包 含 边框 、 内 边 距 和 内 容 盒子 ) 的 宽度 和 高 度 。 
程序 实例 ch15_24.html : box-sizing 的 应 用 。 由 这 个 程序 可 知 ， 当 设 定 box-sizing 后 ， 盒 子 宽度 和 
高 度 将 不 会 受到 内 边 距 和 边框 厚度 的 影响 。 


1 <ldoctype html> 31 <p> 下 列 使 用 box-sizing<p> 


} 
25 </style> 
26 </head> 
27 <body> 
28 <p>》 以 下 未 使 用 box-sizing</p> 


29 <div id="div1">Deepstone</div><br> 
38 <div id="div2">Deepstone</div><br> 


2 <html> 32 <div id="div3">Deepstone</div><br> 
3 <head> 33 xdiv id="div4">Deepstone</div> 
4 <meta charset-"utf-8"> 34 </body> 
5 <titleych15 24.html</title> 35 </html> 
6 <style> 
#div1 { py 
a width:3e0px; height:s8px; 执行 结果 
9 border: 3px solid green; 
19 } 司 
访 kadiva { 以 下 未 使 用 boxsizing 和 
12 width:3060px; height;86px; padding:26pX; [Becp 
13 border;3px solid green; 
14 ] 
15 #div3 { 
16 width:3e0px; height:8epx; 
17 border: 3px solid green; DeepStone 
18 box-sizing:border-box; 
19 
29 #diva { 
21 width:300px; height:sepx; padding:28px; 
22 border; 3px solid green; 下 列 使 用 box-sizing 
23 box-sizing:border -box; Se 
v 


| 15-8 | 内 容 超 出 范围 时 的 显示 方式 


设置 的 内 容 超出 内 容 盒 子 时 ， 可 由 overlow-x (水 平 轴 ) 和 overflow-y (垂直 轴 ) 属性 设 定 处 理 
方式 ， 也 可 以 直接 使 用 overflow 同时 进行 水 平 轴 和 垂直 轴 的 处 理 格式 如 下 。 


overflow-x( 或 overflow-y): visible | hidden | scroll | auto; 
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口 _ visible 
设 定 在 内 容 盒子 外 显示 超出 的 内 容 。 
口 _hidden 
设 定 不 显示 超出 内 容 ， 也 不 提供 水 平 〈 垂 直 ) 滚动 条 。 
口 scroll 
设 定 不 显示 超出 内 容 ， 但 提供 水 平 〈 垂 直 ) 滚动 条 ， 可 卷 动 显 示 内 容 。 
口 auto 


设 定 由 浏览 器 指定 ， 一 般 浏览 器 会 提供 滚动 条 。 
程序 实例 ch15_25.html : 这 个 程序 用 来 使 读者 了 解 未 设 定 overflow-x 和 overflow-y 属性 值 时 ， 浏 
览 器 的 处 理 方式 。 


1 <ldoctype html> 2 二 
2 <html> 执行 结果 
3 <head> 

4 xmeta charset="utf-8"> 

5 <title>xch1s 25.html</title> 

6 <style> 

7 #8divl { width:200px; height:1e0px; border:thin solid green; } 
8 «</style> 

9 </head> 

19 <body> 

11 <div id-"div1"> 站 
12 2666 年 2 月 为 了 享受 边 泡 浊 从 边 看 极光 (Northern Light)， 一 人 独自 坐 飞 机 至 Er 让 要 闫 下放 
13 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接 反 北极 图 的 Chena Hot Springs 氨 闲 淡 假 返 。 第 二 次 碘 上 暴风 雪 ， 了 再 
14 村 ,旅游 期 则 符 试 开车 直达 北 疏 许 (Arctic Ocean)， 第 一 次 车 子 在 冰天雪地 度 失 | ee 
15 打 浙 ， 六 山 怪 失败 而 运 ， 第 二 次 磁 上 篆 风 扫 ， 再 度 失败 ，2697 年 2 月 再 度 醒 征 ， 这 次 华 飞 机 下 这 阿拉 斯 
16 往 ， 这 次 坐 飞机 直达 阿拉 斯 加 最 北城 市 ， 终 于 抵达 北极 海 ， ly 终于 抵达 北 概 
17 </div> 
18 </body> 
19 «</html> 


结果 显示 资料 溢出 情况 非常 明显 。 
序 实 例 ch15_26.html : 重新 设计 程序 ch15_25.html。 此 处 将 overflow-x 和 overflow-y 皆 设 为 
visible， 所 得 到 的 结果 与 上 述 结果 相同 。 这 个 程序 的 样式 表单 如 下 : 


6 <style> 
#div1 { 

8 width:290px; height:100px; border:thin solid green; 
9 overflow-x:visible; overflow-y:visible; 


10 
11 </style> 


程序 实例 ch15_27.html : 重新 设计 ch15_26.html， 将 overflow-x 和 overflow-y 皆 设 为 hidden， 结 果 
是 不 再 有 数据 溢出 ， 这 个 程序 的 样式 表单 如 下 : 


6 <style> Z 二 J 二 
二 执行 结果 

8 width:290px; height:199px; border:thin sotid green; 

9 overflow-x:hidden; overflow-y:hidden; 

0 } 忆 天 
1 </style> 错 极 光 (Northern Tn) ? 


人 独自 坐 飞机 至 阿拉 斯 加 


Alaska)， 再 开车 往 北 至 接近 | 
H 上 极 图 的 Chena Et pt Springs 


程序 实例 ch15_28.html : 重新 设计 ch15_27.html， 将 overflow-x 和 overflow-y 皆 设 为 scroll， 结 果 
是 出 现 滚动 条 ， 可 以 卷 动 显示 资料 。 这 个 程序 的 样式 表单 如 下 : 


HTML5+CSS3 王者 归来 


6 <style> 

有 #divl { 

8 width:290px; height:190px; border:thin solid green; 
9 ‘overflow-x:scroll; overflow-y:scroll; 

有 } 

1 </style> 


下 方 左 图 是 执行 后 的 初始 画面 ， 右 图 是 拖 动 滚动 条 的 效果 。 


| | 
| 本 
| 
过 和 5 


其 实 多 数 情况 出 现 垂直 滚动 条 即 可 ， 可 参考 下 面 的 实例 。 
程序 实例 ch15_29.html : 重新 设计 ch15_28.html， 只 出 现 垂直 滚动 条 。 


5 <title>ch15_29.html</title> 

6 <style> 

2. fdivl { 

8 width:200px; height:190px; border:thin solid green; 
9 overflow-y:scroll; 

0 & 

1 </style> 


请 罗 
,再度 失 败 。 2007 年 2 
理 度 前 往 ， 这 基业 飞机 
达 阿 拉 斯 加 最 北城 市 ， 

北极 海 。 


outline 相关 属性 的 定义 与 border 定义 相同 。 

outline-color : 类 似 于 border-color。 

outline-width : 类 似 于 border-width。 

outline-style : 类 似 于 border-style。 

outline-offset : 用 于 设 定 outline 边线 与 border 边框 的 距离 。 
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程序 实例 ch15_30 : 设计 outline 边线， 宽度 由 于 焉 浏览 器 未 完全 支持 ， 所 
3px、 双 线 、 蓝 色 ， 同 时 设 定 其 与 border 边框 距离 ”以 本 程序 使 用 Chrome 测试 ， 结 果 如 下 图 所 示 。 
是 5px。 


1 <ldoctype html> 
2 <html> 
3 <head> 
<meta charset="utf-8"> 
<title>ch15 38.html</title> 


width:208px; height:16e@px; border:thin solid red; 
9 ‘outline-offset: Spx; 

19 outline-width:3px; 

11 outline-color:blue; 

12 outline-style:dotted; 


: 
14 </style> 
15 </head> 
16 <body> 
17 <div id="div"> 测 试 0utline</div> 
18 </body> 
19 </html> 


另外 ， 可 以 使 用 简易 表示 法 outline， 同 时 设 定 outline-color、outline-style、outline-width， 使 用 
格式 如 下 $ 
outline: outline-color | outline-style | outline-width; 
程序 实例 ch15_31.html : 以 outline 重新 设计 ch15_30.html， 下 面 是 样式 表单 的 内 容 。 
6 <style> 
7 #div { 
8 width:200px; height:100px; border:thin solid red; 
9 outline-offset:Spx; 
10 outline:blue dotted 3px; 
11 
12 


} 
</style> 


15-10 设 定 内 容 盒子 尺寸 的 resize 属性 


这 个 属性 的 使 用 格式 如 下 : 


resize: none | both | horizontal | vertical 


OD none 

设 定 无 法 调整 ， 这 是 默认 值 。 
口 both 

设 定 可 以 调整 宽度 和 高 度 。 
DD horizontal 

设 定 可 以 调整 宽度 。 
口 vertical 

设 定 可 以 调整 高 度 。 


这 个 属性 值 在 使 用 时 需 同时 设 定 overflow 属性 值 ， 可 参考 下 面 程序 实例 的 第 9、14、19 行 。 


HTML5+CSS3 王者 归来 


程序 实例 ch15_32.html : 设 定 可 调整 内 容 盒子 由 于 该 属性 正 浏览 器 不 支持 ， 


的 宽度 、 高 度 ， 以 及 同时 调整 宽度 高 度 的 应 用 。 


1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


5 <*title>ch15 32.html</title> 

6 <style> 

7 #divi { 

8 width:268px; height:56px; border:thin solid blue; 
9 overflow:auto; 

19 resize:horizontal; 

可 

12 #div2 { 

13 width;260px; height;56px; border:thin solid blue; 
14 overflow; auto; 

15 resize:vertical; 

16 } 

17 #div3 { 

18 width:209px; height:5epx; border:thin solid blue; 
19 overflow: auto; 

29 resize:both; 

21 } 

22 </style> 

23 «</head> 

24 <*body> 

25 <div id-"div1"> 可 油 整 宽度 </div><br> 


26 <div id="div2"> 可 调整 而 度 </div><br> 
27 《div id="div3"> 可 调整 宽度 和 高度 </div> 
28 </body> 
29 </html> 


习题 


所 以 用 Chrome 执行 。 下 图 是 执行 的 初始 画面 。 


所 


EL 


[0 


下 图 是 笔者 调整 内 容 盒 子 后 的 画面 ， 拖 中 内 容 盒 
子 的 右 下 角 可 以 调整 其 尺寸 。 


可 


RE | 


DL 


1. 请 设计 一 个 内 容 盒子 ， 这 个 内 容 盒子 需 放 个 人 相片 。 请 利用 所 学 知识 ， 为 这 个 内 容 盒子 建立 10 种 


不 同 边框 效果 。 


2. 请 写 3 首 诗 (当然 可 以 抄写 唐诗 300 首 中 的 诗 )， 建 立 3 种 不 同 版 面 效 果 ， 效 果 可 自行 发 挥 创 意 。 
3. 请 利用 所 学 的 知识 ， 重 新 设计 第 14 章 习 题 的 第 3 题 。 


将 CSS 应 用 在 表格 数据 


本 章 摘要 

16-1 表格 标题 

16-2 ”表格 底 色 的 设计 

16-3 ”表格 框 线 设计 

16-4 ”单元 格 框 线 的 距离 

16-5 为 单元 格 内 容 加 上 内 边 距 
16-6 ”显示 或 隐藏 空白 的 单元 格 
16-7 ”表格 框 线 的 模式 

16-8 单元 格 内 容 排版 

16-9 ”表格 版 面 的 排版 

16-10 ”综合 应 用 


HTML5+CSS3 王者 归来 


| 16-1 | 表格 标题 


6-8 节 曾 介绍 过 <caption> 元 素 可 用 于 建立 表格 标题 ，caption-side 可 以 当 作 <caption> 的 属性 ， 
由 这 个 属性 可 以 设 定 表格 标题 的 位 置 。 它 的 使 用 格式 如 下 : 


caption-side: top | bottom | inherit; 
口 top : 默认 值 ， 设 定 表格 标题 在 表格 上 方 。 口 bottom : 设 定 表格 标题 位 于 表格 下 方 。 
程序 实例 ch16_1.html : 重新 设计 ch6_9.html， 以 CSS 样式 表 设 计 表 格 标 题 ， 并 将 表格 标题 设 定 在 
表格 下 方 ， 表 格 标题 改 成 蓝 色 。 
i 如 执行 结果 所 示 ， 表 格 最 大 的 缺 


3 <head> 


4 seta charsetutf gr) 点 是 ， 标 题 与 表格 框 几乎 紧 紧 相 邻 。 为 了 修改 此 


5 <title>chi6 1.html</title> 

6 1 | 1 

i 缺点 ， 可 以 参考 第 15 章 的 内 容 ， 加 上 padding- 
/styl 

pA top 属性 值 。 

16 xbodyy 


11 <table border="1"> 
12 tcaption> 深 石 数 字 村 场 (/caption> 店名 i a 党 业 时 间 
13 cthead><1-- 建立 表 头 --> 3 北市 忠 茂 路 200 号 

14 <tr>eth> 店 名 </th>cth> 地 址 </th><th> 营 业 时 间 </th></tr> 
15 </thead> 

16 <tbody><1-- 建立 表格 本 体 --> 


|09:00-23:00| 


11:00-20:00| 


17 《<trn>etd> 天 母 店 </td><td> 台 北市 忠诚 路 298 号 </td> 

18 <td rowspan="2">09:09-23:00¢/td></tr> 

19 <tr>etd> 大 安 店 </td><td> 台 北市 大 安 路 1 号 </td></tr> 

20 《tr>etd) 新 竹 店 c/td><td> 新 竹 市 清华 路 112 号 </td><td>11:96-29:98</td></tr> 


21 </tbody> 
22 «</table> 
23 </body> 
24 </html> 


程序 实例 ch16_2.html : 修订 ch16_1.html 的 缺点 ， 让 表格 标题 “ 深 石 数字 卖场 ”与 表格 距离 为 
5px， 此 时 样式 表单 的 设计 如 下 。 


6 <style> | 


地 址 营业 时 间 
[台北 市 思 诚 路 200 号 
天 市 天 天 两 站 可 | 090023200 


经 过 上 述 设计 后 ， 可 以 获得 右 图 | ne re 
所 示 的 较 佳 的 结果 。 ee 


16-2 | 表格 底 色 的 设计 


这 节 将 直接 以 实例 解说 ， 设 计 表 格 的 底 色 。 
程序 实例 ch16_3.html : 重新 设计 ch16 2.html， 将 表格 表 头 底 色 设 为 aqua 色 ， 表 格 本 体 底 色 设 为 
aliceblue。 下 面 只 列 出 样式 表 部 分 ， 因 为 其 他 内 容 完全 相同 。 


bd caption { color:blue; caption-side:bottom; padding-top:Spx; } 
8 </style> 


6 -<style> 和 二 疆 

外 caption { color:blue; caption-side:bottom; padding-top:Spx; } 执行 结果 | 

8 th { background-color:aqua; } :00-23:00| 
9 td { background-color:aliceblue; } 本 | 和 
i TO 


深 石 数字 卖场 


第 16 章 将 CSS 应 用 在 表格 数据 


其 实 将 表格 加 上 底 色 后 ， 若 不 加 表格 框 线 ， 看 起 来 也 相当 有 特色 。 
程序 实例 ch16_4.html : 重新 设计 ch16_3.html， 但 是 取消 表格 框 线 ， 执 行 结果 可 参考 下 图 。 相 较 于 
ch16_3.html， 只 要 删除 程序 第 13 列 属性 border="1" 即 可 ， 至 于 其 他 内 容 则 完全 相同 。 


13 <table> 


| 

天 母 店 台北 市 忠诚 路 200 号 

大 安 店 台北 市 大 安 路 10 号 

新 竹 店 新 竹 市 清华 路 112 号 11:00-20:00 
深 石 数字 卖场 


09:00-23:00 


在 设计 表格 时 ， 也 可 以 直接 在 样式 表 中 定义 border 属性 值 。 


| 16-3 | 表格 框 线 设计 


其 实 如 果 各 位 读者 仔细 看 表格 ， 每 一 个 单元 格 皆 有 一 个 外 框 ， 表 格 整体 也 有 一 个 外 框 ， 两 者 是 
可 以 分 开设 计 的 ， 可 参考 下 面 的 实例 理解 。 
程序 实例 ch16_5.html : 设计 表格 外 框 ， 表 格外 框 是 3px 宽 、 实 线 、 蓝 色 ， 表 格 表 头 外 框 是 2px 
宽 、 实 线 、 绿 色 ， 表 格 本 体外 框 是 1px 宽 、 实 线 、 红 色 。 


1 <ldoctype html> 4= 

2 <html> 执行 结果 
3 <head> 

4 <meta charset="utf-8"> 

和 <title>ch16 5.html</title> 

6 <style> 

table { border:apx solid blue; } 

8 th { border:2px solid green; background-color:aqua; } 


9 td { border:1px solid red; background-color:aliceblue; } 
10 ‘</style> 

11 </head> 

12 <body> 

13 <table> 

14 <thead><1-- 建 立 表 头 --> 

15 <tr><th> 店 名 </th><th> 地 址 </th><th> 营 业 时 同 </th></tr> 

16 </thead> 

17 《<tbody>》<1-- 建立 表格 本 体 --> 

18 <tr><td> 天 母 店 (/td><td> 台 北市 记 谍 路 209 号 </td> 

19 <td rowspan="2">09:20-23:08</td></tr> 

29 <tr><td> 大 安 店 </td><td> 台 北市 大 安 路 16 号 </td></tr> 

21 <tr>ctd> 新 竹 店 </td><td> 新 竹 市 清华 路 112 号 </td><td>11:98-28:98</td></tr> 


22 </tbody> 
23 </table> 
24 </body> 
25 </html> 


| 16-4 | 单元 格 框 线 的 距离 


表格 的 框 线 模式 有 两 种 ， 目 前 所 看 到 的 框 线 模式 是 默认 的 separate，16-7 节 会 更 完整 地 介绍 另 
一 种 框 线 模式 collapse。 在 separate 这 种 框 线 模式 下 ， 单 元 格 与 单元 格 间 ， 或 是 单元 格 与 表格 外 框 线 
间 皆 有 一 定 距离 ， 这 段 距 离 称 border-spacing。border-spacing 的 定义 参考 下 图 。 


HTML5+CSS3 王者 归来 


Ca | . | borderspacing 
台北 市 忠诚 路 200 号 | 


[ETETKZNI107 


新 竹 市 清华 路 112 续 | 


这 个 属性 值 的 使 用 格式 如 下 : 

border-spacing: length [length]; 

length 用 于 定义 长 度 ， 格 式 可 参考 附录 D。 如 果 只 设 定 1 个 长 度 ， 则 是 水 平和 垂直 距离 相同 ; 
如 果 设 定 2 个 长 度 ， 则 第 1 个 长 度 是 水 平 距离 ， 第 2 个 长 度 是 垂直 距离 。 
程序 实例 ch16_6.html : 重新 设计 ch16_5.html， 设 计 单 元 格 框 线 间 水 平和 垂直 的 距离 border- 
spacing 是 10px， 同 时 也 将 表格 内 所 有 单元 格 的 框 线 设 为 1px 宽 ， 表 格外 框 线 则 是 3px 宽 。 下 面 只 列 
出 与 ch16_5.html 样式 表单 的 不 同 之 处 。 


<style> 执行 结 
table { border:3px solid blue; border-spacing:10px; } 


6 
7 

8 th { border:lpx solid green; background-color:aqua; } 

9 td { border:lpx solid red; background-color:aliceblue; } 
0 


10 </style> 


全 北市 3 
:00-23:00| 
北市 大 安 路 10 号 


| | 新 季 市 清华 路 112 号 ] [11:00-20:00|] 


程序 实例 ch16_7.html : 重新 设计 chl6_6.html， 垂 直 间距 不 变 ， 水 平 间距 改 为 30px 宽 。 下 面 只 列 
出 与 ch16_html 程序 代码 不 同 之 处 。 


党 table { border:3px solid blue; border-spacing:30px 10px; } 执行 结果 


大 母语 | 台北 市 电 诚 路 200 号 | 
大 安 店 | | 台北 市 大 安 路 10 号 
新 竹 店 | 。 | 新 竹 市 洁 华 路 112 号 |11:00-20:00| 


16-5 | 为 单元 格 内 容 加 上 内 边 距 


我 们 可 以 将 单元 格 的 内 容 视 为 内 容 盒子 ， 因 此 可 以 将 内 边 距 的 概念 应 用 在 单元 格 内 ， 参 见 下 
图 。 由 ch16_7.html 的 执行 结果 可 以 看 到 “天 母 店 ”“ 大 安 店 ”等 ， 文 字 与 单元 格 框 线 间 几乎 没有 空 
除 ， 这 是 因为 没有 设 内 边 距 padding 的 原因 ， 此 时 相当 于 内 边 距 是 0。 


09:00-23:00| 


第 16 章 将 CSS 应 用 在 表格 数据 


---- padding-top 
---- padding-right 


---- padding-left 
-—--- padding-bottom 


本 节 实 例 将 改良 此 状况 。 在 为 单元 格 内 容 设 定 内 边 距 时 ， 可 使 用 如 下 属性 : 

padding-top : 设 定 内 容 上 方 的 内 边 距 。 

padding-right : 设 定 内 容 右 侧 的 内 边 距 。 

padding-left : 设 定 内 容 左 侧 的 内 边 距 。 

padding-bottom : 设 定 内 容 下 方 的 内 边 距 。 

padding : 上 述 属性 的 简易 表示 法 。 如 果 只 有 1 个 数值 ， 则 代表 四 周 等 距离 ; 如 果 有 2 个 数 
值 ， 则 第 1 个 数值 设 定 上 、 下 内 边 距 ， 第 2 个 数值 设 定 左 、 右 内 边 距 ; 如 果 有 3 个 数值 ， 则 第 
1 个 数值 设 定 上 内 边 距 ， 第 2 个 数值 设 定 左 、 右 内 边 距 ， 第 3 个 数值 设 定 下 内 边 距 ; 如 果 有 4 
个 数值 ， 则 第 1 个 数值 设 定 上 内 边 距 ， 第 2 个 数值 设 定 右 内 边 距 ， 第 3 个 数值 设 定 下 内 边 距 ， 
第 4 个 数值 设 定 左 内 边 距 。 


其 实在 实际 应 用 中 一 般 是 设 定 四 个 内 边 距 相等 的 。 
程序 实例 ch16_8.html : 重新 设计 ch16_7.html， 将 表格 的 单元 格 内 边 距 设 为 5px。 


6 <style> 

7 table { border:3px solid blue; border-spacing:30px 19px; } 

8 th { border:1px solid green; background-color:aqua; padding:5px; } 

9 td { border'lpx solid red; background-color:aliceblue; padding:Spx; } 
10 </style> 


| | 


由 下 列 执 行 结果 可 知 ， 字 符 串 紧 贴 单元 格 的 现象 已 经 消失 了 。 
i] CC we | [Cwm] 


台北 市 忠诚 路 200 号 


09:00-23:00 


台北 市 大 安 路 10 号 


新 性 市 清华 路 112 号 11:00-20:00 


empty-cells 属性 的 使 用 格式 如 下 : 
empty-cells: hide | show | inherit; 
口 hide : 设 定 不 显示 内 容 、 框 线 、 底 色 。 口 ”show : 默认 值 ， 表 示 显 示 框 线 、 底 色 。 


程序 实例 ch16_9.html : 本 程序 第 10 行 设 定 empty-cells 的 属性 值 是 show， 程 序 第 25 行 设 定 第 2 
栏 第 4 行 单元 格 内容 是 空白 ， 测 试 没有 内 容 的 单元 格 显示 方式 。 


HTML5+CSS3 王者 归来 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 


5 <title>chi6 9.html</title> 
6 <style> 

7 table { 

a border: 3px solid blue; 

a border-spacing:38px 18px; 

10 empty-cells:show; 

1 } 

2 th { border:lpx solid green; background-color:aqua; padding:5px; } 
3 td { border;1px solid red; background-color:aliceblue; padding:Spx; } 
14 </style> 

15 </head> 

16 <body> 

17 <table> 

18 。 <theadyc1- -建立 表 头 --> 

19 <tr>cth> 店 名 </th><th> 地 址 </th>cth> 苔 业 时 同 c/thy</tr> 

28 </thead> 

21 ”<tbody><1-- 建立 表格 本 体 --> 

22 <tr><td> 天 母 店 </td><td> 台 北市 志 诚 路 208 号 </td> 


23 <td romspan="2">891868-23:96</td>c/tr> 
24 <tr><td> 大 安 店 </td>etd> 扣 北市 大 安 路 16 号 </td></tr> 

25 <tr>ctd> 新 竹 店 c/td>ctd></td><td>11:69-20:68</td></tr> 
26 </tbody> 

27 </table> 


28 </body> 
29 </htal> 


台北 市 思 诚 路 200 号 


台北 市 大 安 路 10 号 


程序 实例 ch16_10.html : 重新 设计 ch16_9.html， 设 定 empty-cells 的 属性 值 是 hide， 下 面 只 列 出 程 


序 内 容 不 一 样 的 部 分 。 


10 empty-cells:hide; 


台北 市 忠诚 路 200 号 


台北 市 大 安 路 10 号 


程序 实例 ch16_11.html : 重新 设计 ch16_10.html， 将 表格 整 行 单元 格 数据 设置 为 空白 ， 了 解 执行 


结果 。 下 面 是 程序 第 25 行内 容 。 


25 <tr><td></td><td></td><td></td></tr> 


台北 市 忠诚 路 200 号 


台北 市 大 安 路 10 号 


下 面 的 实例 是 测试 表格 内 某 行 单元 格 为 空白 的 执行 结果 。 
程序 实例 ch16_12.html : 在 empty-cells 的 属性 值 是 hide 时 ， 设 定 某 行 单元 格 为 空白 的 执行 结果 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <title>ch16_12</title> 

6 <style> 

7 table { border:solid 4px blue; } 
8 


th{ 
9 background-color: Lightblue; 
19 padding:5px; border:2px solid blue; 
11 } 
12 tdt 
3 background-color: lightgray; padding:Spx; 
14 border:2px solid blue; 
15 empty-cells:hide; 
16 } 
17 </style> 
18 </head> 
19 <body> 
29 <table> 


21 <tr><th>Country</th><th>University</th></tr> 


22 <tr><td>USA</td><td>University of Mississippi</td></tr> 
23 <tr><td>France</td><td>University of Paris</td></tr> 
24 。 <tP<td></td><td></td></tr> 

25 <tP<td>]apan</td><td>University of Tokyo</td></tr> 

26 </table> 

27 </body> 

28 </htmt> 
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| 16-7 | 表格 框 线 的 模式 


border-collapse 属性 可 用 于 设计 表格 框 线 是 否 与 单元 格 框 线 合并 ， 它 的 使 用 格式 如 下 : 


border-collapse: separate | collapse | inherit; 

separate 

默认 值 ， 即 表格 框 线 与 单元 格 框 线 彼此 分 开 ， 其 实 本 章 目前 所 有 框 线 设置 均 为 这 个 选项 。 
collapse 


使 用 这 个 值 时 ， 表 格 框 线 与 单元 格 框 线 会 合 


程序 实例 ch16_13.html : 重新 设计 ch16_10.html， 将 表格 框 线 与 单元 格 框 线 合并 。 下 面 只 列 出 样 
式 表单 的 设计 ， 重 点 注意 第 11 行内 容 。 


6 
了 


one 执行 结果 


border:3px solid blue; 
border-spacing:30px 10px; 
empty-cells:hide; 
border-collapse:collapse; 


3 
th { border:1px solid green; background-color:aqua; padding:5px; } 台北 市 忠诚 路 200 号 
td { border;lpx solid red; background-color:aliceblue; padding:Spx; } 09:00-23:00 
</style> | 台北 市 大 安 路 10 号 | 大 安 路 10 号 


人 


上 述 执行 结果 的 最 大 特点 是 ， 设 定 了 collapse 属性 值 后 ， 原 先 border-spacing 的 设 定 就 不 具 意 义 
因为 表格 框 线 与 单元 格 框 线 已 经 合并 了 。 


| 16-8 | 单元 格 内 容 排版 


设计 表格 时 ， 默 认 环 境 是 单元 格 的 内 容 居中 对 齐 ， 其 实 我 们 可 以 将 12-1 节 text-align 的 属性 值 


套用 在 表格 内 ， 建 立 不 同 的 对 齐 方式 表格 。 
程序 实例 ch16_14.html : 重新 设计 ch16_12.html， 设 定 表格 表 体 的 内 容 靠 左 对 齐 。 这 个 程序 是 在 
原 程序 上 增加 第 16 行 ， 得 到 所 要 的 结果 。 
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text-align: left; 
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| 16-9 表格 版 面 的 排版 


table-layout 属性 用 于 处 理 表格 的 布局 ， 它 的 使 用 格式 如 下 : 


table-layout : auto | fixed | inherit; 


DOD auto 

默认 值 ， 即 表格 的 宽度 会 依 单元 格 内 容 宽度 而 定 ， 系 统 自动 配置 足够 空间 ， 只 要 浏览 器 窗口 够 
宽 内 容 就 不 会 分 行 显示 。 
口 fixed 

设 定 表 格 为 固定 宽度 。 
程序 实例 ch16_15.html : table-layout 属性 的 应 用 。 这 格 程序 设计 了 2 个 表格 ， 第 1 个 表格 使 用 系 
统 默 认 值 auto( 第 9 行 )， 所 以 即使 第 1 个 单元 格 分 配 的 空间 是 整体 宽度 的 10%， 不 够 配置 ， 但 是 浏 
览 器 仍 分 配 足够 的 空间 供 它 完整 显示 数据 ; 第 2 个 表格 使 用 fixed (第 10 行 )， 单 元 格 分 配 的 空间 是 
整体 10% 宽度 的 ， 不 够 配置 ， 所 以 溢 位 显示 。 程 序 第 7 行 “width:100%” 的 意思 是 表格 宽度 继承 父 
元 素 的 宽度 ， 相 当 于 <body> 的 宽度 。 


1 <!doctype html> 22 <table id="sample2"> 

2 <html> 23 <tr> 

3 <head> 24 <td width="10%">9999999999</td> 
4 <meta charset="utf-8"> 25 <td width="90%">8888888888</td> 
5 <title>ch16_15.html</title> 26 </tr> 

6 <style> 27 </table> 

7 table { width:100%; border:1px solid; } 28 </body> 

8 td { border:1px solid; } 29 </html> 

9 table#samplel { table-layout:auto; } 

10 table#sample2 { table-layout:fixed; } = 

11 </style> 执行 结果 

12 </head> 

13 <body> 

14 <p>table-layout: auto</p> table-layout: auto 

陡 Se id="samplel"> | i 

17 <td width="10%">9999999999</td> tabie-layout: fixed 

18 <td width="90%">8888888888</td> 

19 </tr> | 88888 


20 </table> 
21 <p>table-layout: fixed</p> 


16-10 综合 应 用 


在 表格 的 设计 中 ， 常 看 到 奇数 行 与 偶数 行 有 不 同 的 底 色 ， 若 适当 地 利用 样式 表 ， 也 可 以 实现 。 
下 列 是 可 使 用 的 选择 器 : 

n:nth-child (n) 

上 述 选择 器 的 原意 是 将 设置 套用 在 第 n 个 子 元 素 的 p 元 素 ， 若 将 上 述 CSS 改写 如 下 : 


tr:nth-child (2n+1) 


第 16 章 将 CSS 应 用 在 表格 数据 


则 代表 所 有 奇数 的 表格 行 。 若 将 上 述 CSS 改写 如 下 : 


tr:nth-child (2n) 


则 代表 所 有 偶数 的 表格 行 。 

程序 实例 ch16_16.html : 改写 ch16_1.html， 同 时 让 表格 奇数 行 显示 底 色 为 aqua， 偶 数 行 显示 底 色 
为 粉红 色 。 注 意 ， 表 头 〈 第 19~21 行 ) 与 表格 本 体 〈 第 22~26 行 ) 的 tr 将 重新 计算 ， 所 以 前 两 行 的 
底 色 皆 是 aqua。 


1 <ldoctype html> 
2 <html> 
3 <head> 
‘<meta charset="utf-8"> 


a 

2 A [ 语 名 ”地 十 “|[ 千 下 时 间 | 
6 <style> 

pe RE 009.00.23:00| 
em [全 北市 天 安 路 10 写 |o9:00-22:00| 


9 background- color :aqua; 

11 tr:nth-child(2n) { ”/* 表格 侨 数 行 */ 医 委 周 

12 background-color: pink; RE 
经 深 石 数字 卖场 
14 </style> 

15 </head> 

16 xbody> 


17 <table border="1"> 
18 “caption> 深 石 数字 实 场 </caption> 
19 <thead><1- -建立 表 头 --> 


29 <tr><th> 店 名 c/th>cth> 地 址 </th><th> 营 业 时 间 </th></tr> 

21 </thead> 

22 <tbody><1-- 建立 表格 本 体 --> 

23 <tr><td> 天 母后 </td><td> 台 北市 包 诚 路 299 号 </td><td>e9:09-23:09</td></tr> 
24 《tr><td> 大 安 后 </td><td> 台 北市 大 安 路 16 号 ¢/td><td>99:09-22:00¢/td></tr> 
25 《tr><td> 新 竹 店 </td><td> 新 竹 市 清华 路 112 号 </td><td>11:89-28:68</td></tr> 
26 </tbody> 

27 </table> 

28 </body> 

29 </html> 


上 述 程序 表 头 和 表格 本 体 第 一 行 背景 色 皆 是 aqua， 下 面 是 将 表 头 取消 后 的 效果 。 
程序 实例 ch16_17.html : 重新 设计 ch16_17.html， 取 消 表 头 。 


1 xldoctype htnl> 
2 <htmly 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch16_ 17.html</title> 
6 

7 

8 


<style> 
caption { margin-top:Spx; color:blue; caption-side:bottom; } 
tr:nth-child(2n+1) { /* 表格 奇效 行 */ 


9 background-color:aqua; 
18 和 

和 trsnth-child(2n) { 。 /* 雪 格 僵 数 行 */ 

12 background-color:pink; pp 
1 深 石 数字 卖场 
14 </styley 

15 </head> 

16 <body> 


17 «table border-"1"> 
18 ”<caption> 深 石 数 字 实 场 </caption> 
19 <tbody><1-- 建立 表格 本 体 --> 


2 《tr><td> 店 名 </td><td> 地 址 </td><td> 营 业 时 间 </td></tr> 

21 <tr><td> 天 母 店 </td><td> 台 北市 放 广 路 286 号 </td><td>89:868-23:98</td></tr> 
22 <tr><td> 大 安 店 </td><td> 台 北市 大 安 路 19 号 </td><td>99:88-22:08</td></tr> 
23 <tr><td> 新 竹 店 </td><td> 新 竹 市 清华 路 112 号 </td><td>11:60-28:68</td></tr> 


24 </tbody> 
25 </table> 

26 </body> 

27 </html> 
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程序 实例 ch16_18.html : 重新 设计 ch16_11.html， 将 样式 表 抽 离 <body>， 改 写 在 <head> 内 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 


5 <title>chie 18.html¢/title> 

6 <style> 

六 col#ex1 { background-color:lightgray; } 
8 col#ex2 { backeround-color:yellow; } 

9 </style> 

18 </head> 

11 <¢body> 


12 <table border="1"> 

13 。 <《caption> 深 石 数字 卖场 </caption> 
14 <colgroup> 

15 <col id="ex1"> 

16 <col span="2" id="ex2"> 

17 </colgroup> 

18 ”<thead><1-- 建 立 表 头 --> 


19 <tr>cth> 店 名 </th><th> 地 址 </th>cth> 蓄 业 时 间 </th></tr> 
29 </thead> 

21 。 <tbody><1-- 建立 表格 本 体 --> 

22 <tr>ctd> 天 母 店 c/tdkctd> 台 北市 记 诚 路 299 号 c/td> 

23 <td rowspan="2"209:00-23;696c/td>c/tr> 

24 <tr><td> 大 安 店 </td><td> 台 北市 大 安 路 19 号 </td></tr> 

25 <tr>ctd> 新 竹 店 </td>ctd> 新 竹 市 清华 路 112 号 </td><ctd>11:68-28:e8</td></tr> 
26 -</tbody> 

27 </table> 

28 </body> 

29 </html> 


与 ch16_11.html 相同 。 


习题 

1. 请 设计 2018 年 水 果 月 历 网 站 ， 每 个 月 以 一 种 水 果 为 主题 ， 请 自行 发 挥 创意 。 
2. 请 设计 2019 年 以 自己 为 主角 的 月 历 ， 每 个 月 一 个 主题 ， 请 自行 发 挥 创意 。 
3. 请 美化 第 6 章 习 题 。 

4. 请 重新 设计 ch16_16.html， 将 表格 表 头 改 为 浅 蓝 色 〈lightblue )。 


设计 渐变 效果 


本 章 摘要 

17-1 线性 渐变 函数 linear-gardient() 

17-2 放射状 渐变 函数 radial-gradient() 

17-3 ”重复 线性 渐变 函数 repeating-linear-gradient() 
17-4 ”重复 放射 性 渐变 函数 repeating-radial-gradient() 
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1 17-1 线性 渐变 函数 linear-gardient() 


这 是 一 个 线性 渐变 函数 ， 可 以 设 定 色 彩 从 某 一 个 方向 往 另 一 个 方向 的 不 同色 彩 作 线 性 渐变 。 它 
的 使 用 格式 如 下 : 


linear-gradient (direction, color stop，… , color stop) 


口 direction 


设 定 色彩 方向 ， 有 许多 表达 方式 ， 可 用 角度 值 或 英文 表示 ， 参 见 下 图 。 
fo top 或 0deg 


to leff 或 270deg to right 或 90deg 


225deg 135deg 


to botiom 或 180deg 


例如 : 

由 上 往 下 可 用 : to bottom、180deg。 

由 下 往 上 可 用 : to top、0deg。 

由 左 往 右 可 用 : to right、90deg。 

由 右 往 左 可 用 : to left、270deg。 

也 可 用 上 述 英 文字 母 的 组 合 来 设 定 区 块 对 角 方式 的 线性 渐变 ， 例 如 ， 右 下 往 左上 是 to top left、 
左下 往 右 上 是 to top right、 右 上 往 左 下 是 to bottom left、 左 上 往 右 下 是 to bottom right。 值 得 注意 的 
是 ， 以 对 角 方式 设 定 渐变 时 ， 不 一 定 是 45 度 ， 因 为 这 种 指定 方式 是 由 区 块 对 角 进 行 颜色 渐变 的 ， 只 
有 区 块 是 正方 形 时 ， 才 是 45 度 角 。 

DOD colorstop 


设 定 色彩 停 驻 点 ， 如 果 只 是 两 个 点 之 间 的 颜色 变化 ， 可 以 直接 指定 起 点 的 颜色 和 终点 的 颜色 。 
如 果 线 性 变化 过 程 有 多 于 两 个 的 颜色 参与 ， 则 中 间 点 的 颜色 需 指 定 色彩 和 位 置 ， 位 置 指定 方式 为 起 
点 是 0% 终点 是 100%。 颜 色 和 位 置 中 间 需 空 一 格 ， 例 如 ，yellow 30%， 代 表 30% 处 的 颜色 是 黄色 。 
如 果 线性 变化 过 程 有 多 于 两 个 的 颜色 参与 ， 并 且 不 指明 颜色 位 置 ， 则 以 位 置 均等 分 方式 处 理 。 

色彩 的 使 用 可 以 参考 附录 下。 
程序 实例 ch17_1.html : 两 种 颜色 渐变 的 应 用 。 


1 <ldoctype html> 


2 <html> 

3 <head> 

4 xmeta charset="utf-8"> 

5 <titleych17 1.html</title> 

6 <style> 

7 #ex1 { background: linear-gradient(to right,yellow,blue); } 
8 #ex2 { background:1linear-gradient(to left,yellow,Breen); } 
9 #ex3 { background: linear-gradient(to top,red,ereen); } 

19 #ex4 { background;linear-Bradient(to bottom,ereen,blue); } 
11 #ex5 { 

12 width:468px; 

13 height:266px3 

14 background: linear -gradient(to top right,green,yellow); 
15 } 

16 ‘</style> 

17 </head> 

18 <body> 


19 <h4 id-"ex1">HTMLS + CSS3 王者 归来 /hl> 
20 《hl id="ex2">HTMLS + CSS3 王者 归来 人 /hl> 
21 《hl1 id-"ex3">HTML5 + C5S3 王者 归来 /hl1> 
22 《hl id="ex4">HTMLS + CSS3 王者 归来 /hl> 


程序 实例 ch17_2.html : 3 种 颜色 渐变 的 应 用 。 


6 style~ 
7 #exl { background: linear-gradient(to right,yellow, red,blue); } 

8 #ex2 { background: linear-gradient(to left,yellow, red 39%,green); } 
9 #ex3 { background: linear-gradient (to top, red,gray,green); } 

10 #ex4 { background: linear-gradient(to bottom, green, pink,blue); } 
11 #ex5 { 

12 width: 

13 heigl 

14 background: linear-gradient(to top right, red,yellow 30%,green); 


16 </style> 
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23 《ha id="ex5">HTMLS + C553 王者 归来 (/h1> 
24 </body> 
25 </html> 


下 面 只 列 出 与 ch17_1.html 的 不 同 之 处 。 


程序 实例 ch17_3.html : 使 用 渐变 色 重 新 设计 ch3_8.html。 


1 <tdoctype htmly 
2 <htnl> 
3 <head> 
4 《meta cherset="utf-8"> 


5 title>ch17 3.html</title> 
6 <style> 

7 hl#exl { 

8 width:40epx; 

9 height :59px; 

19 text-align: center; 

11 background: linean-gradient (to right,yellow, green); 
12 } 

3 hl#ex2 { 

14 width:490px; 

15 height :5epx; 

16 background: linear-gradient(to right,yellow,red); 
17 } 

18 pipex1 { background:linear-gradient (to right,pink,blue; 
19 Section { backaround:linear-gradient(to right bottom,yel] 
20 ‘</style> 

21 </head> 

22 <body> 


23 <h1 id-"ex1">Silicon Stone Education</hl> 

24 <p id-"pexl"》 国 际 认证 的 权威 机 构 ， 位 于 加 州 尔 湾 。</P> 

25 <section> 

26 <h1 id="ex2"yBig Data Knowledget/h1y 

27 tp? 大 数据 (Big Data) 已 成 为 目前 全 球 学 术 单位 、 政 府 机 关 以 及 
28 顶级 企业 必须 认真 面 对 的 挑战 ， 随 着 有 关 大 数据 的 程序 语言 、 
29 运算 平台 、 基 础 理论 ， 以 及 虚拟 化 、 容 器 化 技术 的 成 名 ， 了 解 
38 大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 趋势 ， 将 会 是 求学 、 
31 进修 、 求 职 ,深造 的 必 备 技能 。</p> 

32 </section> 

33 <section> 

34 <h1 id="ex2">R Language Today</h1> 


35 。 “py 自由 软件 R 是 一 种 根基 于 S 语言 的 GNU 免 费 的 统计 数学 套装 分 
36 享 软件 ， 为 探索 性 数据 分 析 、 统 计 方法 及 图 形 提供 了 所 有 的 
37 源码 。</p> 

38 </section> 

39 </body> 

48 </html> 
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17-2 放射 状 渐变 函数 radial-gradient() 


这 是 一 个 放射 性 渐变 函数 ， 可 以 设 定 色彩 从 某 一 个 点 以 圆 形 或 椭圆 形 往 四 周 的 不 同色 彩 作 放 射 
性 渐变 。 它 的 使 用 格式 如 下 : 


radial-gradient (shape length position, color stop，… ，color stop) 
DO shape 

设 定 色彩 放射 的 形状 ， 如 果 省 略 系统 会 依照 尺寸 自行 判断 。 可 以 使 用 圆 形 circle 或 椭圆 ellipse。 
口 length 


通过 关键 词 或 是 尺寸 指定 渐变 ， 可 以 使 用 的 关键 词 有 : 

closest-side : 如 果 外 形 是 圆 形 〈circle)， 则 色彩 由 圆 形 中心 往 最 近 的 方块 边 渐变 。 如 果 外 形 是 椭 
圆 (ellipse)， 则 色彩 由 椭圆 中 心 往 最 近 的 方块 边 渐变 。 

farthest-side : 如 果 外 形 是 圆 形 ， 则 色彩 由 圆 形 中 心 往 最 远 的 方块 边 渐变 。 如 果 外 形 是 椭圆 ， 则 
色彩 由 椭圆 中 心 往 最 远 的 方块 边 渐变 。 

closest-corner : 如 果 外 形 是 圆 形 ， 则 色彩 由 圆 形 中 心 往 最 近 的 方块 角 渐变 。 如 果 外 形 是 椭圆 ， 
则 色彩 由 椭圆 中 心 往 最 近 的 方块 角 渐变 。 

farthest-corner : 如 果 外 形 是 贺 形 ， 则 色彩 由 圆 形 中 心 往 最 远 的 方块 角 渐变 。 如 果 外 形 是 椭圆， 
则 色彩 由 椭圆 中 心 往 最 远 的 方块 角 渐变 。 

长 度 的 设 定 方法 可 以 参考 附录 D。 如 果 是 圆 形 ， 则 可 以 指定 一 个 长 度数 值 。 注 意 设 定时 shape、 
length 之 间 空 一 格 。 

实例 1 : 设 定 圆 形 渐变 ， 渐 变 半径 是 50px。 

radial-gradient (circle 50px,yellow,red) 

如 果 是 椭圆 形 可 以 指定 2 个 长 度数 值 ， 第 一 个 是 水 平 轴 ， 第 二 个 是 垂直 轴 。 

实例 2 : 设 定 椭圆 形 渐 层 ， 渐 层 半 径 水 平 轴 是 250px， 垂 直 轴 是 100px。 


radial-gradient (ellipse 250px, 100px,yellow, red) 

若 省 略 长 度 ， 则 使 用 默认 值 farthest-corner。 
DO position 

这 个 参数 默认 是 由 中 心 点 开始 往外 作 色 彩 渐变 ， 但 是 也 可 以 使 用 top、right、bottom、left 或 数 
值 、% 值 方式 设 定 中 心 点 。 


DD “color stop 


这 个 参数 的 使 用 方法 与 前 一 节 相 同 。 
程序 实例 ch17_4.html : 2 种 和 3 种 颜色 放射 性 渐变 的 应 用 。 
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1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


5 ctitleych17 4.html</title> 
6 <style> 

7 #ex1 { background:radial-gradient(circle,yellow,blue); } 

8 #ex2 { background:radial-gradient(ellipse,yellow,green); } 

9 #ex3 { 

19 width:490px; 

1 height: 208px; 

12 background: radial -gradient (circle closest-side,white, red 66%,gray); 
13 } 

14 #exd { 

15 width:40epx; 

16 height: 208px; 

17 background: radial -gradient (ellipse farthest-side,white, red 60%,gray); 
18 } 

19 </style> 

29 </head> 

21 <body> 


22 《hl id-"ex1">HTML5 + SSs3 王者 归来 </h1> 
23 <h1 x2">HTML5 + CSS3 王者 归来 </h1> 
24 <h1 i x3">HTML5 + CSS3 王者 晤 来 /hl> 
25 <hi xd">HTML5 + CSS3 王者 归来 </hl> 
26 ¢/body> 
27 </html> 


程序 实例 ch17_5.html : 放射 渐变 中 心 点 不 在 区 块 中 心 的 应 用 。 
1 <ldoctype html> 

2 <htnl> 

3 <head> 

人 meta charset-"utf-Bry 

5 <titleycha7_5.htmle/titley 

5 estyley 
8 


sexl { 
width:46e0px; 

9 height: 200px; 

19 background: radial -gradient(circle 26epx at 38% 65%,red,yellow,green); 

1 } 

12 #ex2 { 

13 width:400px; 

14 height; 266px; 

5 background: radial-gradient(ellipse 120px 7gpx at 66% 6@%,white,red 6@%,1ightgray); 

16 } HTMLS + CSS3 王者 归来 

17 </style> 

18 </head> 

19 <body> 

29 “hl id="ex1">HTML5 + C553 王者 归来 </h1> 

21 <hl id="ex2">HTML5 + C553 王者 归来 </h1> 

22 </body> 

23 </html> 


17-3 a repeating—linear— 
gradient 


repeating-linear-gradient() 函数 的 使 用 方法 与 linear-gradient() 基本 相同 ， 至 于 可 以 重复 多 少 次 视 
起 始 色 彩 停 驻 点 至 结束 色彩 停 驻 点 的 长 度 而 定 。 如 果 想 渐变 重复 5 次 ， 则 设 定 结束 色彩 停 驻 点 的 位 
置 是 20%。 如 果 想 重复 4 次 ， 则 设 定 结束 色彩 停 驻 点 的 位 置 是 23%。 其 他 参数 用 法 ， 请 依 此 类 推 。 
程序 实例 ch17_6.html : repeating-linear-gradient() 的 基本 应 用 。 


HTML5+CSS3 王者 归来 


1 xldoctype html> 
2 xhtmly 
3 <head> 
上。 kmeta charset-"utf-Bry 


5 ctitleych17_6.htmle/titley 
6 <style> 

7 #exl { background: repeating-linear-gradient(to right,yellow @%,red 20%,blue 3980; } 
a #ex2 { background: repeating-linear-gradient(to left,yellow ex,pink 15X,8reen 39%); } 
9 wex3 { background: repeating-linear-gradient(to top,red 9%,gray 25%,8reen Se%); } 

19 ex4 { background:repeating-linear-gradient(to bottom, green ex,pink 25%,blue SoX); } 
1 #ex5 { 

12 Width:4eapy3 

3 height: 266px; 

14 background:repeating-linear-gradient(to top right,red a%,yellow 2a%,blue 48Y); 

15 ] 

16 。 cjstyley 

17 /head> 

18 <body> 


19 <hl id="exlryHTMLS + C553 王者 归来 cyhly 


29 <hl 1d="ex2">HTML5 + C553 王者 归来 </hly 
21 ex3"YHTML5 + C553 王者 归来 c/hly 
22 ex4">HTML5 + C553 王者 归来 </hly 


<hl id="ex5">HTML5 + C553 王者 归来 chly 
24 </body> 
25 /html> 


程序 实例 ch17_7.html : 使 用 repeating-linear-gradient() 重新 设计 17_ 3.html。 下 面 将 列 出 与 ch17_3. 
html 不 同 的 样式 表单 部 分 。 


6 <style> 

久 hyexl { 

8 

9 

19 

1 background: Linear-gradient{to botton, yellow,green); 

12 } 

3 hfex2 { 

14 width:400px; 

15 height:50px; 

16 background: repeating-linear-gradient(to top,green, yellow S50%); 

17 

18 ppexl { background: repeating-\linear-gradient(to right,pink,pink 20%,yetlow 50%); } 
19 section { background: repeating-\inear-gradient(to right,white,yellow 50%); } 


20 </style> 


重复 放射 性 渐变 函数 repeating-radial- 
gradient() 


repeating-radial-gradient() 函数 的 使 用 方法 与 radial-gradient() 相同 ， 至 于 可 以 重复 多 少 次 视 起 始 
色彩 停 驻 点 至 结束 色彩 停 驻 点 的 长 度 而 定 。 如 果 想 要 重复 5 次 ， 则 请 设 定 结束 色彩 停 驻 点 的 位 置 是 
20%。 如 果 想 要 重复 4 次 ， 则 请 设 定 结束 色彩 停 驻 点 的 位 置 是 25%。 其 他 参数 用 法 ， 请 依 此 类 推 。 
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程序 实例 ch17_8.html : repeating-radial-gradient() 的 基本 应 用 。 


1 <ldoctype html> 和 
2 xhtmly 执行 结 


3 <head> 
4 <meta charset="utf-8"> 


5 <titleych17 8.html</title> 
6 <style> 

可 #ex1 { background:repeating-radial-gradient(circle,yellow,blue 3ex); } 

8 #ex2 { background:repeating-radial-gradient(ellipse,yellow,green 3e%); } 

9 #ex3 { 

10 width:agepx; 

1 height:2eepx; 

12 background: repeating-radial-gradient (circle closest-side,white, red 28%,gray 40%); 

13 } 

14 #ex4 { 

15 width:aeepx; 

16 height:299px3 

17 background:repeating-radial-Bgradient(ellipse farthest-side,white, red 28X,Bray 48%); A 

18 汪 

19 -</style> - PESCIT 

20 </head> F pp” 所 
21 <body> 

22 <hl id="exl">HTML5 + CSS3 王者 归来 </hi> 

23 <hl id="ex2">HTMLS + CSS3 王者 归来 </h1> 

24 <hl id="ex3">HTHLS + CSS3 王者 归来 </hly 

25 <h1l ="ex4">HTML5 + CSS3 王者 归来 6/h1> 

26 </body> 

27 </html> -本 


程序 实例 ch17_9.html : 这 是 一 个 综合 应 用 的 程序 ， 重 新 设计 了 ch10_16.html。 


1 
zh 执行 结 
3 heady 


本 
5 <title>chl7_9.html</title> 
6 <style> 
7 
a 


‘<meta charset="utf-8"》 
pe | 


hgroup { background:linear -gradient(to right,white, yellow); } 

ha { width:390px; background: repeating-linear-gradient (to right,ysllou, aqua Se%); } 
9 nav { wath:5eepx; heignt: 3eepx 
418 background ;repeating-radial 


adient(ellipse,vhite, yallow 4eX,green Sg%); 


12 phex { background:repeating-radial 
13 xfstyley 

14 </head> 

15 <body> 

16 <header> 

17 <heroupy 


18 <hd1> 深 五 几 字 科技 </ha7 最 新 出 版 表 千 3 
NAD 


dient (ellipse farthest-side,white,WfsF5F5) } 


19 <ha> 深 度 学 习 滴水 穿 石 </ha> 
28 </hgroup> 


于 pes, TEEN EPO rr or oknFRelaar Wan 
Sp Mooss Ti 

2 p> MPa tit sm 

24 a hrefcrhttp:Lhantsiliconstone .com 国际 认证 c/ayanbspy&nbsp; aaaiariaaaasiggaiiciaopaaa 

25 <a href"httpi/Livnru grandtech infor> 志 条 出 版 */a>anbspianbsp5 

26 a href="http: /ue, iohexan. tu”»JobExanc/a) 

27 cbrycbry<bry 

28 洪 锦 魁 著 cimg src="book, jpg" alt="my book”width="3sepx"y 

29 </p> 

38 </nav> 


31 <section> 
32 <h1> 最 新 出 版 公告 </h1> 
3 carticle> 


34 <hl>R 语 言 迈 向 9i8g Data 之 路 </hl> 


35 <p 10="ex"> 现 在 是 6Big Data 时 代 ， 若 想 进入 这 个 领域 ，R 语 言 可 说 是 最 重要 的 
36 程序 语言 ,学 习 本 书 不 需要 有 统计 基础 ， 但 是 在 无 形 中 本 书 己 经 
37 灌溉 了 统计 知识 给 你 。</p> 


38 </article> 
39 carticle> 

48 <ha>HTRL5+CS53 王者 归来 </h1>》 

a <p id-exryHTRL 可 以 设计 网 页 内 容 与 结构 ，css 网 是 设计 5 排版 与 外 观 。</P> 
42 </article> 

43 </section> 

44 </body> 

a5 </htnly 


习题 

1. 请 重新 设计 ch17_3.html， 内 容 可 自行 发 挥 创意 。 

2. 请 重新 设计 ch17_9.html， 内 容 可 自行 发 挥 创意 。 

3. 请 以 目前 所 学 的 知识 扩充 先前 的 作业 ， 设 计 一 个 以 自己 为 主题 的 网 页 ， 内 容 可 自行 发 挥 创意 。 


设计 多 栏 版 面 


本 章 摘要 

18-1 ， 设 定 栏 数量 与 宽度 的 columns 属性 
18-2 ， 设 定 栏 与 栏 间距 的 column-gap 属性 
18-3 ， 设 定 栏 与 栏 线 的 属性 column-rule 
18-4 ”设置 跨栏 显示 的 column-span 属性 
18-5 设 定 栏 高 度 的 column-fll 属性 

18-6 ， 换 栏 或 换 页 


至 今 所 看 到 的 网 页 版 面 很 多 是 多 个 栏 构成 的 ， 本 章 将 讲解 设计 多 栏 版 面 。 
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中 :着 设 定 栏 数量 与 宽度 的 columns 属性 


columns 属性 可 以 设 定 栏 数 量 与 宽度 。 不 过 在 正式 介绍 columns 前 ， 先 介绍 另外 两 个 与 设 定 栏 数 
量 与 宽度 有 关 的 属性 。 


18-1-1 设 定 栏 数量 的 column-count 属性 
column-count 属性 可 以 直接 设 定 网 页 版 面 的 栏 数 ， 它 的 使 用 格式 如 下 : 


column-count: auto | count | initial | inherit; 


口 auto 
默认 值 ， 为 一 个 栏 ， 但 是 会 因 其 他 属性 值 ( 如 column-width) 而 调整 。 
口 count 
栏 的 数量 。 
程序 实例 ch18_1.html : 设 定 输出 两 个 栏 的 应 用 。 这 个 程序 的 第 8 行 直 接 设 定 输出 是 两 个 栏 。 
1 <ldoctype html> 24 chDR Language Today</h1> 
2 <html> 25 ”<p> 自由 软件 R 是 一 种 根基 于 S 语言 的 GWU 免 费 的 统计 数学 套装 分 享 软 件 ， 对 于 探索 性 
3 <head> 26 ”数据 分 析 、 统 计 方法 、 及 图 形 ， 提 供 了 所 有 的 源码 。</p> 
4 ‘<meta charset="utf-8"» 27 </section> 
本 <titleych18 1.html¢/title> 28 </div> 
6 «style> 29 </body> 
7 div{ 38 </html> 
8 column-count:2; 
二 
和 执行 结果 
12 </style> 
13 </head> 


14 <body> 
15 <div> 

16 <hi>Silicon Stone Education</h1> 

17 py 国际 认证 的 权威 机 构 ， 位 于 加 州 尔 海 。 </py 

18 <section> 

19 。 <hlyBig pata knowledgec/hay 

29 ”<p> 大 数据 (8ig Data) 已 成 为 目前 全 球 学 术 单位 、 政 府 机 关 以 及 项 级 企业 必须 认真 
31。 面 对 的 挑 战 ， 随 着 育 关 大 歼 据 的 程序 语言 、 运 算 平台 、 基 础 理论 ， 以 及 走 拟 化 、 守 
22 器 化 技术 的 成 让 ， 了 解 大 数据 的 原 瑟 、 实 作 、 工 具 ， 应 月 以 及 未 来 趋势 ， 将 会 是 求 
23 学、 进 个、 求职 ， 深 千 的 必 各 技能 。</p》 


程序 实例 ch18_2.html : 将 属性 column-count 设 定 为 auto， 观察 执行 结果 。 与 ch18_1.html 比较 ， 
这 个 程序 只 更 改 了 第 8 行 代码 。 


7 div { 
8 


column-count:auto; 执行 结果 
} 


9 


HTML5+CSS3 王者 归来 


18-1-2 设 定 栏 宽度 的 column 一 width 属性 


它 的 使 用 格式 如 下 : 

column-width: auto | count | initial | inherit; 
DQ auto 

默认 值 ， 为 一 个 栏 ， 但 是 会 因 其 他 属性 值 (如 column-count) 而 调整 。 
口 count 


栏 的 宽度 ， 这 个 宽度 是 最 适合 的 宽度 ， 而 不 是 绝对 宽度 。 浏 览 器 会 依照 目前 窗口 宽度 做 适度 调整 。 
程序 实例 ch18_3.html : 设 定 栏 宽度 是 150px。 与 ch18_1.html 比较 ， 这 个 程序 只 是 更 改 了 第 8 行 
代码 。 


7 di 4 二 J 十 一 sl 
8 na an, 下 图 所 示 是 在 Firefox 浏览 器 下 
9 } 的 执行 结果 。 


程序 实例 ch18_4.html : 设 定 栏 宽度 是 auto。 与 ch18_1.html 比较 ， 这 个 程序 只 是 更 改 了 第 8 行 代码 。 


7 div { 行 疆 这 个 行 E 
8 column-width:auto; 这 个 程序 的 执行 结果 与 ch1l8_2. 
9 } html 相同 。 


18-1-3 栏 数 量 与 宽度 简易 表示 法 columns 


这 个 属性 值 是 对 column-count 和 column-width 的 简易 表示 。 


columns: auto | column-count column-width | initial | inherit; 


程序 实例 ch18_5.html : 使 用 columns 属性 值 直接 设 定 栏 的 宽度 ， 以 及 栏 的 数量 。 这 个 程序 在 设计 
时 ， 笔 者 增加 了 一 个 line-height 属性 ， 也 许 读者 将 来 在 设计 网 页 时 ， 可 以 参考 用 此 属性 设 定 行 与 行 
的 间距 。 


: yt EE 起 颈 ”下 图 所 示 是 在 Firefox 下 的 执行 
8 Line-height:1.5em; 

9 columns:3 150px; 

10 } 


结果 。 

RE y 
Hoagie few 一 
mee 
me 
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设 定 栏 与 栏 间 距 的 column-gap 属性 


它 的 使 用 格式 如 下 : 


column-gap: normal | 间距 值 | initial | inherit; 


口 _normal 
默认 值 ， 不 同 浏览 器 有 不 同 的 设 定 值 ，W3C 建议 是 lem。 
口 ” 间 距 值 


直接 为 栏 间 距 指 定 一 个 数值 。 
程序 实例 ch18_6.html : 将 栏 与 栏 间距 设 为 1.5em。 


4 div { J 结 示 Firefo; 行 
8 line-height:1.5em; 下 图 所 示 是 在 Firefox 下 的 执行 
9 columns:3 150px; 结果 ， 与 ch18_5.html 相 比 间距 比较 大 。 

10 

3 


column-gap:1,5em; We 

} 全 SS Room | 
Re 

me 注 半 误 至 


二: 二 设 定 栏 与 栏 线 属性 column=-rule 


column-rule 可 以 设 定 栏 与 栏 线 的 属性 。 不 过 在 正式 介绍 column-rule 前 ， 先 介绍 另外 3 个 与 设 定 
栏 与 栏 线 有 关 的 属性 。 


18-3-1 设 定 栏 线 类 型 的 column-rule-style 属性 
这 个 属性 可 以 设 定 栏 与 栏 之 间 线 的 类 型 ， 它 的 使 用 格式 如 下 : 


column-rule-style: none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset | initial | inherit; 


上 述 值 中 ，none 是 默认 值 ， 表 示 没 有 栏 线 ， 其 他 属性 值 与 border-style 的 属性 值 相同 ， 可 参考 


15-4-1 节 。 
程序 实例 ch18_7.html : 重新 设计 ch18_6.html， 在 栏 间 增加 实 线 界线 。 


7 div { 
8 line-height:1.5em; emstone 


9 columns:3 150px; 
19 column-gap:1. 5em; 
11 column-rule-style: solid; | 
12 生 

EE 下 。” 右 图 是 程序 在 Firefox 下 的 执行 
结果 。 


HTML5+CSS3 王者 归来 


18-3-2 设 定 栏 线 颜 色 的 column-rule-color 属性 
这 个 属性 可 以 设 定 栏 与 栏 之 间 界 线 的 颜色 ， 它 的 使 用 格式 如 下 ; 


Column-rule-color: 颜色 | initial | inherit; 
颜色 的 定义 可 参考 附录 E。 
程序 实例 ch18_8.html : 重新 设计 ch18_7.html， 将 栏 线 设 为 粉红 色 (pink)。 

div { 4 全 疆 WE 
old Sen 下 图 是 程序 在 Firefox 下 的 执行 
9 columns:3 150px; 结 
10 column-gap:1.5em; 


果 。 
11 column-rule-style:solid; Mess 
12 column-rule-color:pink; el | 
和 : Ed EE 


18-3-3 设 定 栏 线 宽度 的 column-rule-width 属性 
这 个 属性 可 以 设 定 栏 与 栏 之 间 界 线 的 宽度 ， 它 的 使 用 格式 如 下 : 


column-rule-color: medium | think| thick | length | initial | inherit; 


口 _medium : 默认 值 ， 表 示 中 等 宽度 。 
口 think : 窄 的 栏 线 。 

口 thick : 宽 的 栏 线 。 

口 length : 设 定 栏 线 宽度 ， 长 度 单位 可 参考 附录 D。 

程序 实例 ch18_9.html : 重新 设计 ch18_8.html， 栏 线 宽度 使 用 thin， 颜 色 改 为 蓝 色 。 
i 下 图 是 程序 在 Firefox 下 的 执行 
10 te 结 


11 column-rule-style:solid; 


12 column-rule-color:blue; eenstone Es 
13 column-rule-width:thin; | 
本 RE 党 


程序 实例 ch18_10.html : 重新 设计 ch18_9.html， 栏 线 宽度 使 用 5px。 
dt 下 图 是 程序 在 Firefox 下 的 执行 


line-height:1.5em; 


columns:3 150px; 结 
column-gap:1.5em; 
column-rule-style: solid; 


果 。 

Bl 
column-rule-color:blue; Bs Re 
coLumn-rute-width:5px; wn 

本 
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18-3-4 栏 线 属性 的 简易 表示 法 column-rule 


这 个 属性 是 对 column-rule-style、column-rule-color、column-rule-width 的 简易 表示 ， 使 用 格式 
如 下 了 


initial | 


column-rule: column-rule-style | 


inherit; 


column-rule-color | 


column-rule-width | 


程序 实例 ch18_11.html : 使 用 column-rule 属性 重新 设计 ch18_10.html。 


div { 
line-height:1.5em; 
columns:3 150px; 
column-gap:1, 5em; 
column-rule:solid blue Spx; 


这 个 程序 的 执行 结果 与 ch18_10.html 相同 。 


| 18-4 | 设置 跨栏 显示 的 column-span 属性 


口 
口 


它 的 使 用 格式 如 下 : 


column-span: 


none : 默认 值 ， 表 示 不 跨栏 显示 。 
all : 做 跨栏 显示 。 


none | alll| initial | 


inherit; 


程序 实例 ch18_12.html : 重新 设计 ch18_11.html， 但 是 标题 “Silicon Stone Education ”跨栏 显示 ， 
读者 需 留意 第 14、20 行 。 


1 
2 
3 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch18_12.html</title> 
<style> 
div { 
line-height:1.5em; 
columns;3 150px; 
column-gap:1.5em; 
colunn-rule:solid blue Spx; 
} 
hi { background-color:aqua; color:blue; } 
ha#ex { column-span:all } 
p { background-color:yellow; } 
</style> 
</head> 
<body> 
<div> 
<h1 id="ex">Silicon Stone Education</h1> 
《p> 国际 认证 的 权 或 机 构 ， 位 于 加 州 尔 湾 。</p> 
<section> 
<h1>8ig Data Knowledgec/h1> 
<p> 大 数据 (Big Data) 已 成 为 上 前 全 球 学 术 单 位 、 政 府 机 关 以 及 顶级 企业 必须 认真 
面临 对 挑战 ， 随 着 育 关 大 数据 的 程序 诺言、 运算 平台 、 基 础 理论 ， 以 及 兰 拟 化 、 容 
器 化 技术 的 成 熟 ， 了 解 大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 莽 菇 ， 将 会 是 求 
学 、 进 修 、 求 职 ， 深 造 的 必 有 备 技能 。</p> 
<hl>R Language Today</h1> 
<《p> 自 由 软件 R 是 一 种 根基 于 S 语言 的 GNU 免 费 的 统计 数学 套装 分 享 软件 ， 为 探索 性 数 
据 分 析 、 统 计 方 法 及 图 形 提供 了 所 有 的 源码 - </p> 
</sectiony 
div> 
</body> 
</html> 


下 列 程序 以 下 执行 ， 因 


Firefox 浏览 器 不 支持 column-span。 


为 
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| 18-5 | 设 定 栏 高 度 的 column=fill 属性 


这 个 属性 值 目前 只 有 Firefox 浏览 器 支持 ， 它 的 使 用 格式 如 下 : 


column-fill: balance | autol initial | inherit; 
口 balance 

默认 值 ， 表 示 将 内 容 平 均 分 割 。 
DD auto 

这 个 值 用 于 设置 前 一 个 栏 填 完 再 填 下 一 栏 ， 有 时 会 发 生前 面 一 个 栏 填 满 ， 后 面 的 栏 可 能 为 空白 
的 情形 。 


程序 实例 ch18_13.html : column-fill 属性 值 是 balance 时 的 应 用 。 这 个 程序 为 了 要 凸显 执行 结果 ， 
所 以 程序 第 8 行将 div 高 度 设 为 250px。 


1 xldoctype html> 可 

2 chtnl> EE- 让 车 ”下列 是 Firefox 的 执行 结果 。 

3 <head> 

4 ‘<meta charset="Utf-8"> ~ 
i 职 ， 尖 以 备 技能 ， 

3 a os 大 (Big Data) 已 成 为 上 前 全 于 学 术 部 位 、 

J 到 科 机 癸 以 及 友 级 业 必须 认真 于 的 挑 。 | 自由 软件 R 是 一 种 要 站 于 S 语言 的 GNU 免 榴 

a height:250px; 上 ' 阴 着 有 关 大 数 撕 的 和 序 语 尚 运算 平 | 的 统计 数学 守 半 分享 软件 为 探索 性 数据 

3 De 各 天寿 论 ， 以 及 庶 妆 化 * 容器 人 技术 的 分析、 统计 方法 及 图 形 提供 了 所 有 的 源 码 ， 

运 a 成 中 ,了 解 大 效 据 入 原理 、 实 作 、 工具 、 应 

1 column-rule:solid blue Spx; 用 以 及 未 来 趋势 ， 将 会 是 求学 、 进 修 、 求 

12 column- fill:balance; 

3 ) 

14 -</style> 

15 </head> ~ 

16 <body> 


17 <div> 

18 。 《p> 大 数据 (Big Data) 已 成 为 目前 全 球 学 术 单 位 、 政 府 机 关 以 及 顶级 企业 必须 认真 
19 。。 面 对 的 挑战 ， 随 若 育 关 大 数据 的 程序 语言、 运算 十 台 、 基 础 玛 论 ， 以 及 虚拟 化 、 大 
29 ”器 化 技术 的 成 熟 ， 了 解 大 数据 的 原 到 、 实 作 、 工 具 、 应 用 以 及 未 来 的 委 ， 将 会 是 求 
21 学、 进修 、 求 职 ， 深 得 的 必 甸 技能 。</p> 

22 <p> 自由 软件 R 是 一 种 根基 于 S 语言 的 GNU 免 费 的 绞 计 雪 学 套装 分 享 软件 ， 为 蓉 索 性 数 
23 。 “所 分 析 、 统 计 方法 及 图 形 提供 了 所 有 的 源码 。</p> 

24 </div> 

25 </body> 

26 </html> 


程序 实例 ch18_14.html : 重新 设计 ch18_13.html， 设 定 column-fill 属性 值 是 auto 时 的 应 用 ， 其 与 
ch18_14.html 的 不 同 之 处 如 下 。 


~ di em, 二 一 
人 i ZE 下 图 是 在 Firefox 中 的 执行 结果 。 
9 Uine-height:1.5en; 

10 columns:2; 本 

11 column-rule: solid blue Spx; 大 (Bg Data) 忆 四 前 全 学 术 关 位、 | 、 生 法 有 提供 了 所 大友 

12 column-fill:auto; 政府 机 侨 以 及 顶级 企业 必须 认真 面 对 的 挑战 ， 

13 } 哺 着 有 侨 大 数据 的 程序 语言 - 运 持平 台 、 基础 


至 论 ， 以 及 庶 所 人， 容器 化 技术 的 成 熟 " 了 解 
大 数据 的 原理 、 实 作 、 工 具 、 应 江 以 及 未 来 趋 
势 ， 将 会 是 求学 、 进 修 、 求职、 深造 的 必 备 
EE 


自由 软件 R 是 一 种 概 关于 S 语言 的 SNU 免 袖 的 
统计 数学 套装 分 享 软件 ， 为 探索 性 获 握 分 
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18-6 | 换 栏 或 换 页 


浏览 器 显示 网 页 内 容 时 ， 会 依据 栏 宽 度 、 栏 数量 、 网 页 内 容 或 一 些 其 他 设 定 自 动 换 栏 或 换 页 。 
本 节 内 容 主要 是 叙述 可 利用 本 节 各 小 节 的 属性 值 ， 设 定 换 栏 显示 或 是 换 页 显示 。 


18-6-1 break-before 
这 个 属性 用 于 设 定 在 特定 元 素 ( 也 可 想 成 内 容 盒子 ) 之 前 换 栏 (页 )， 它 的 使 用 格式 如 下 : 


break-before: auto | always | avoid | left | right | page | column | avoid- 


page | avoid-column; 

auto : 默认 值 ， 表 示 由 浏览 器 自行 调整 。 口 ”page : 在 特定 位 置换 页 。 

always : 在 特定 位 置换 栏 ( 页 )。 口 、column : 在 特定 位 置换 栏 。 

avoid : 在 特定 位 置 不 换 栏 (页 )。 口 avoid-page : 在 特定 位 置 不 换 页 。 

left : 换 页 ， 下 一 页 在 左 页 。 口 _avoid-column : 在 特定 位 置 不 换 栏 。 

right : 换 页 ， 下 一 页 在 右 页 。 

程序 实例 ch18_15.html : 这 个 程序 设 定 2 个 标题 能 够 自动 换 栏 输出 。 读 者 须 留 意 的 是 第 13 行 的 换 
栏 输出 设 定 ， 另 外 也 须 留意 第 22 与 27 行 ， 这 些 设 定 使 得 两 个 标题 会 自动 换 栏 输出 。 


| 


, ee ex 执行 结果 下 图 是 程序 在 Chrome 
下 的 执行 结果 。 


a <meta charset="utf-8"> 

5 <title>chis 15.html</title> 
6 «<style> 
+ 
8 


Bi Data Knowledge | RLanguage Today 
i i 
columns:3; 
9 con geben Wm 


10 column-rule-style;solid; 

11 

12 hi { background-color:aqua; color:blue; } 
13 #columnbreak { break-before;column; } 

14 p { background-color:yellow; } 

15 </style> 

16 </head> 

17 <body> 

18 <div> 


19 <hl>Silicon Stone Education</h1> 

29 “py 国际 认证 的 权威 机 构 ， 位 于 加 州 尔 湾 。</p> 

21 <section> 

22 <hl id="columnbreak">Big Data Knowledge</h1> 

23 ”<p> 大 数据 (Big Data) 已 成 为 目前 全 球 学 术 单位 、 政 府 机 关 以 及 顶级 企业 必须 认真 
24  ” 面 对 的 挑战 ， 随 着 有 关 大 数据 的 程序 语言 、 运 算 平台 、 基 础 吾 论 ， 以 及 宕 拟 化 、 容 
25 ”器 化 技术 的 成 熟 ， 了 解 大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 趋势 ， 将 会 是 求 
26 学、 进修、 求职， 深造 的 必 各 技能 .</p> 

27 <hl id="columnbreak">R Language Today</h1> 

28 ”<p> 自由 软件 R 是 一 种 根基 于 S 语言 的 GNU 免 费 的 统计 数学 套装 分 享 软件 ， 为 探索 性 
29 ”数据 分 析 、 统 计 方法 及 图 形 提供 了 所 有 的 原 玛 。</p> 

39 </section> 

31 </div> 

32 </body> 

33 </html> 
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18-6-2 break-after 
这 个 属性 用 于 设 定 在 特定 栏 (页 ) 之 后 换 栏 (页 )， 它 的 使 用 格式 如 下 : 


break-after: auto | always | avoid | left | right | page | column | avoid-page 


| avoid-column; 


上 述 属性 值 与 18-6-1 节 break-before 的 用 法 相同 。 
程序 实例 ch18_16.html : 重新 设计 ch18_15.html， 但 是 改 成 在 标题 后 换 栏 输出 。 这 个 程序 相 较 于 
ch18_15.html， 只 修改 了 第 13 行 。 


13 #columnbreak { break-after:column; } 


下 图 是 程序 在 Chrome 下 的 执行 结果 。 


18-6-3 break-inside 
这 个 属性 可 用 于 设 定 某 个 元 素 的 动作 ， 它 的 使 用 格式 如 下 : 


break-inside: auto | avoid | initial | inherit; 


auto : 默认 值 ， 表 示 由 浏览 器 自行 判断 是 否 换 栏 或 换 页 。 

avoid : 在 特定 元 素 内 (也 可 想 成 内 容 盒子 ) 不 换 栏 或 页 。 
程序 实例 ch18_17.html : 重新 设计 ch18_1.html， 设 定 段落 内 不 换 栏 输出 。 由 于 段落 不 换 栏 输 
出 ， 整 个 第 二 段 内 容 将 不 跨栏 ， 直 接 在 新 的 栏 中 输出 ， 读 者 可 以 比较 这 个 程序 与 ch18_1.html 的 
执行 结果 。 

1 <ldoctype html> 

2 <html> 


3 <head> 
4 <meta charset="utf-8"> 


口 
口 


5 <title>ch18_17.html</title> 

6 <style> 

7 div { 

8 columns:2: 

9 } 

19 hl { background-color:aqua; color:blue; } 
11 #columnbreak { break-inside:avoid; } 
12 p { background-color:yellow; } 

13 </style> 

14 </head> 

15 <body> 

16 <div> 


17 <hl>Silicon Stone Education</h1> 

18 <p> 国 际 认证 的 权威 机 构 ， 位 于 加 州 尔 湾 。</p> 
19 <section> 

20 <h1>Big Data Knowledge</h1> 
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21 ”<p id="columnbreak"> 大 数据 (Big Data) 己 成 为 目前 全 球 学 术 间 位、 政府 机 关 以 及 项 
22 ”级 企业 必须 认真 画 对 的 挑战 ， 随 着 有 关 大 数据 的 程序 语言 、 运 算 平 台 、 基 础 理论 ， 以 
23 及 庶 拟 化、 容器 化 技术 的 成 熟 ， 了 解 大 数据 的 原理 、 实 作 、 工 具 、 应 用 以 及 未 来 趋势 ， 
24 ”将 会 是 求学 、 进 修 、 求 职 ， 深 造 的 必 备 技能 。</p> 

25 <h1>R Language Today</h1> 

26 ”<p id="columnbreak"> 自 由 软件 R 是 一 种 根基 于 S 语言 的 GNU 免 费 的 统计 数学 套装 分 享 
27 ”软件 , 为 探索 性 数据 分 析 、 统 计 方法 及 图 形 提供 了 所 有 的 源码 。</p> 

28 </section> 

29 </div> 

39 </body> 

31 </html> 


习题 

1. 请 重新 设计 ch12_1.html， 内 容 要 求 有 2 栏 ， 可 以 自行 美化 。 

2. 请 重新 设计 ch18_2.html， 第 一 个 hl 标题 以 及 内 文 用 一 栏 ， 以 后 的 文本 则 用 两 栏 ， 内 文 可 以 自行 
美化 。 

3. 请 用 3 种 不 同 栏 线 重新 设计 ch18_7.html。 

4. 请 重新 设计 之 前 的 一 个 作业 ， 用 3 种 不 同 颜色 设计 栏 线 。 

5. 请 重新 设计 之 前 的 一 个 作业 ， 选 用 不 同 的 栏 宽度 。 


定位 与 网 页 排版 


本 章 摘 要 

19-1 设 定 盒子 的 大 小 

19-2 ” 设 定 盒子 大 小 的 极限 

19-3 display 属性 

19-4 ”用 于 定位 的 position 属性 

19-5 ” 设 定 与 解除 图 旁 串 字 

19-6 ” 堆 笃 顺序 

19-7 ”显示 或 隐藏 元 素 的 visibility 属性 

19-8 用 box 调整 元 素 呈 现 方式 的 object-fit 属性 
19-9 ” 设 定 垂直 对 齐 的 vertical-align 属性 


其 实 本 章 内 容 是 HTML4.01 版 或 更 早 版 本 就 有 的 网 页 排版 知识 ， 但 HTML5 仍然 支持 。 笔 
者 将 在 本 章 介绍 早期 版 本 的 网 页 排版 方法 ， 下 一 章 则 介绍 HTML5 的 新 网 页 排版 功能 。 
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设 定 盒子 的 大 小 


10-6 节 曾 介绍 过 区 块 层级 盒子 (block box) (也 可 称 区 块 层 级 或 区 块 ) 与 行内 层级 盒子 (inline 
box)〈 也 可 称 行内 层级 )。 如 果 忘 了 以 上 内 容 ， 建 议 先 返回 复习 该 节 内 容 。 其 实 之 前 章节 已 有 许多 程 
序 实 例 介 绍 使 用 width 和 height 属性 设 定 区 块 盒子 (block box) 宽度 和 高 度 的 方法 了 ， 下 面 将 再 以 
程序 实例 做 进一步 解说 。 
程序 实例 ch19_1.html : 设 定 第 一 个 字符 串 用 默认 方式 输出 ， 底 色 是 灰色 ， 可 参考 第 7、12 
行 ; 第 二 个 字符 串 用 设 定 区 块 大 小 方式 输出 ， 同 时 设 定 底 色 是 黄色 ， 字 符 是 蓝 色 ， 可 参考 第 8、 
1 和 5 


se 下 列 左 图 是 浏览 器 宽 
1 度 足 够 时 程序 的 执行 结果 ， 右 图 是 
浏览 器 窗口 缩小 宽度 时 程序 的 执行 结 


Hexl { background-color:eray; } 


sex2 { width:30epx; height:200px; background-color:yellow; color:blue;} 果 ， 第 一 个 区 块 使 用 默认 值 ， 大 小 会 
9 </style> 


ee 自行 调整 ， 第 二 个 区 块 大 小 则 不 更 
es 改 。 当 浏览 器 宽度 变 宽 时 ， 第 一 个 区 
全 区 块 会 放大 ， 第 二 个 区 块 大 小 不 更 改 。 


Ee 
下 所 设 定 盒子 大 小 的 极限 


CSS 提供 一 些 属性 来 设 定 盒子 大 小 的 极限 ， 下 面 是 设 定 盒子 宽度 极 大 值 的 使 用 格式 : 


max-width: none | 长 度 | % | initial | inherit; 


口 ”none : 默认 值 ， 表 示 不 设 定 极 宽 值 。 
长 度 : 这 个 值 使 用 长 度 设 定 极 宽 值 ， 单 位 的 设 定 可 参考 附录 D。 
口 “% : 用 百分比 设 定 极 宽 值 。 同 样 的 使 用 格式 可 以 应 用 在 下 列 属性 : 


max-height : 区 块 高 度 极 大 值 。 

min-width : 区 块 宽度 极 小 值 。 

min-height : 区 块 高 度 极 小 值 。 
程序 实例 ch19_2.html : 设 定 第 一 个 字符 串 用 默认 方式 输出 ， 底 色 是 灰色 ， 可 参考 第 7、13 行 ; 
第 二 个 字符 串 用 区 块 元 素 输出 ， 但 是 限制 宽度 的 极 大 值 是 500px， 同 时 设 定 底 色 是 黄色 ,字符 是 蓝 
色 ， 可 参考 第 8、14 行 。 


口 


223 


224 
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a 这 个 程序 在 执行 时 ， 当 

ee max-width:500px; background-color:yellow; color:blue;} 浏览 器 宽度 小 于 500px 但 大 于 可 以 完整 
显示 字符 串 的 宽度 时 ， 会 出 现下 方 左 图 
的 结果 ; 当 浏 览 器 宽度 大 于 500px 时 ， 
第 一 个 区 块 将 持续 放大 显示 ， 第 二 个 
块 则 固定 宽度 为 500px。 


区 


display 属性 


笔者 在 10-6 节 介绍 过 区 块 层级 (block level) 与 行内 层级 (inline-level)， 每 一 个 元 素 缘 有 默认 


的 显示 层级 ， 但 是 可 以 用 display 属性 更 改 这 个 显示 层级 。 它 的 使 用 格式 如 下 : 


display: inline | block | inline-block | inline-table | list-item | run-in | table | 
none | initial | inherit; 


inline 

将 元 素 声明 为 行内 层级 (inline level)。 

block 

将 元 素 声明 为 区 块 层级 (block level)。 

inline-block 

将 元 素 本 身 声明 为 行内 层级 (inline level)， 区 块 内 部 则 声明 为 区 块 层 级 〈block level)。 
inline-table 

将 元 素 要 对 为 行内 层级 (inline level) 的 表格 。 
list-item 

将 元 素 声明 为 类 似 <li> 元 素 。 

run-in 

将 元 素 声明 为 区 块 层级 或 行内 层级 ， 需 视 元 素 内 容 而 定 。 


table/table-caption/table-column=-group/table-header-group/table-footer-group/ 
table-row-group/table-cell/table-column/table-row 


将 元 素 声明 为 类 似 <table>/<caption>/<colgroup>/<thead>/<tfoot>/<tbody>/<td>/<col>/<tr> 元 素 。 
none 

不 显示 。 

其 实在 CSS3 内 ，display 属性 仍 有 其 他 用 途 ， 将 在 下 一 节 解说 。 
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程序 实例 ch19_3.html : display 属性 的 基本 应 用 ， 将 <hl> 声明 为 行内 层级 。 这 个 程序 第 7 行 是 将 
<hl> 元 素 由 区 块 层级 改 为 行内 层级 ， 所 以 第 2 个 <h1l> 输出 应 该 在 第 1 个 <hl> 输出 的 右边 。 


7 i display:inline; } 下 方 左 图 是 浏览 器 宽度 刚好 是 一 
8 #exl { background-color:gray; } 条 数据 的 宽度 时 的 输出 结果 ， 下 方 右 图 是 增加 浏 
9 #ex2 { background-color:yellow; color:blue;} ce 

10 </style> 览 器 宽度 的 执行 结果 。 


Es 
下 图 是 浏览 器 宽度 够 放 两 条 数据 时 的 输出 效 

果 ， 这 两 条 <hl> 在 同一 行 输出 。 

SSGSS56 量 张 HTMLS+ CSS3 王者 归来 


程序 实例 ch19_4.html : display 属性 的 基本 应 用 ， 将 <span> 声明 为 区 块 层级 。 第 一 条 输出 字符 串 
“作者 洪 锦 购 ” 是 标准 的 行内 层级 输出 ， 程 序 第 7 行 已 经 将 span 声明 为 区 块 层 级 ，id 是 ex， 所 以 执 
行 结果 得 到 字符 串 “作者 洪 锦 购 ”在 下 一 行 输出 。 


1 xldoctype html> 全 疆 
2 <html> 执行 结果 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch19 4.htnl<¢/title> HTML5 + CSS3 作 者 洪 锦 魁 深 石 数字 发 行 
6 <style> 

7 spantex { display:block; color:red;} HIML5 + CSS3 

时 作者 洪 饮 手 

9 </head> Se 一 

10 tbody> 深 石 数字 发 行 


11 <p>HTML5 + C553<spany 作 者 洪 锦 寿 </span> 深 石 数 字 发 行 c/p> 

12 <p>HTML5 + CSS3<span id="ex"> 作 者 洪 策 魁 </span> 深 石 数 字 发 行 c/p> 
13 </body> 

14 </html> 


用 于 定位 的 position 属性 


这 个 属性 可 以 设 定 区 块 盒子 (block box) 的 编排 方式 或 称 定位 ， 它 的 使 用 格式 如 下 : 
position: static | absolute | fixed | relative | initial |inherit; 
口 static 
以 正常 顺序 排序 (normal flow)。 所 谓 正常 如 果 是 行内 层级 则 是 沿 水 平方 向 由 左 到 右 显 
顺序 是 ， 区 块 盒子 依 在 HTML 文件 代码 的 顺序 ” 示 ， 如 下 图 所 示 。 
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口 absolute 

定位 方式 是 相对 于 浏览 器 窗口 的 左上 角 ， 当 窗口 卷 动 时 ， 此 区 块 盒子 将 随 之 卷 动 ， 可 参考 
19-4-2 节 实例 。 
口 fixed 

定位 方式 是 相对 于 浏览 器 窗口 的 左上 角 ， 但 是 窗口 卷 动 时 ， 此 区 块 盒子 不 会 卷 动 ， 可 参考 
19-4-3 节 实例 。 
OD relative 

相 较 于 正常 位 置 的 定位 。 

使 用 position 属性 定位 后 ， 就 可 以 使 用 top、right、bottom、left 等 属性 设 定 相 较 于 正常 显示 位 
置 位 移 的 量 。 这 4 个 属性 的 使 用 方式 如 下 : 


top: auto | length | % | initial | inherit; 


口 _ auto 

由 浏览 器 计算 上 边界 距离 。 
OD length 

以 长 度 设 定 距离 ， 可 参考 附录 D。 这 里 允许 是 负 值 。 
日 名 

以 百分比 形式 计算 上 边界 距离 。 


以 上 值 可 以 应 用 在 right (右边 界 )、bottom (下 边界 )、left (左边 界 ) 属性 中 。 在 属性 position 
是 relative 值 时 ， 位 移 的 定义 可 参考 下 图 。 


top:50px 


left:150px 


即 假设 在 正常 顺序 (normal low) 下 ， 虚 线 白 底 框 是 block box 2 的 预计 位 置 ， 如 果 位 移 量 是 
“top:50px”“left:150px”， 则 黄 底 block box 2 真正 位 置 应 如 图 中 所 示 。 


19-4-1 position 属性 值 是 relative 的 程序 实例 


程序 实例 ch19_5.html : 按 正常 顺序 输出 区 块 盒子 ， 但 是 设 定 top 偏 移 10px，left 偏 移 50px， 这 个 
程序 的 重点 是 第 9、11 行 。 


第 19 章 定位 与 网 页 排版 
1 <ldoctype html> Zz 二 J 十 
2 <htmt> 执行 结果 
3 <head> 
4 <neta charset="utf-8"> 
5 <title>ch19_5.html</title> 
6 <style> 
7 #exl { width:250px; height:150px; background-color:aqua; } 
8 #ex2 
9 position: relative; width:250px; height:159px; 
10 background-color:yellow; color:blue; 
11 top: 19px; Left:59pxi 
12 } 
13 </style> 
14 </head> 
15 <body> 
16 <hl id="ex1">HTMLS + CS53</hl> 
17 <hl id="ex2">HTMLS + CS53</hl> 
18 </body> 
19 </html> 


令 偏 移 量 为 负 值 时 ， 可 以 将 第 二 个 区 块 盒子 移 到 第 一 个 区 块 盒子 的 右边 。 
程序 实例 ch19_6.html : 偏 移 量 负 值 的 应 用 。 这 个 程序 会 将 第 二 个 区 块 盒子 移 到 第 一 个 区 块 盒子 的 
右边 ， 这 个 程序 的 重点 是 第 9、11 行 ， 下 面 仅 列 出 与 上 例 的 不 同 之 处 。 


6 <style> 4 二 入 
7 #exl { width:250px; height:150px; background-color:aqua; } 执行 结 
8 


#ex2 { 
A 


9 position: relative; width:250px; height:150px; 
10 background-color:yellow; color:blue; 
11 top:-172px; left:280px; 
12 } 
13 -</style> 
v 


程序 实例 ch19_7.html : 区 块 盒子 是 可 以 重 迭 的 。 这 个 程序 使 用 top 为 负 值 的 偏 移 量 ， 来 造成 区 块 
盒子 重 失 ， 这 个 程序 的 重点 是 第 9、11 行 ， 下 面 仅 列 出 与 上 例 的 不 同 之 处 。 


6 -<style> a 
7 wexl { width:250px; height:15epx; background-color:aqua; } 执行 结果 
日 ex2 { 

9 position: relative; width:258px; height:158px; 

19 background-cotor:yettow; color:blue; 

11 top: -SOpx; left:80px; 

12 } 


A 
| 二 
v 


程序 实例 ch19_8.html : 行内 层级 输出 数据 偏 移 的 应 用 。 这 个 程序 的 重点 是 第 7 行 声明 <hl> 是 行 
内 层级 ， 第 11 是 定义 position 为 relative， 第 12 行 定 义 偏 移 量 。 


7 hl { display:inline; } 

8 #ex1 { background-color:aqua; } i 

9 #ex2 { HIMESFCSS3 HTMLS+CSS3 
10 background-color:yellow; color:blue; 

11 position: relative; 

12 top:10px; left:20px; 

13 } 


14 </style> 


程序 实例 ch19_9.html : 行内 层级 输出 数据 偏 移 的 应 用 。 这 个 程序 会 输出 两 条 数据 ， 第 一 条 数据 
的 第 二 句 “ 深 度 学 习 滴水 穿 石 ”没有 偏 移 ， 第 二 条 数据 的 第 二 句 “ 深 度 学 习 滴 水 穿 石 ” 往 下 偏 移 
了 本 Spxe 
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1 xldoctype html> 

2 xhtmly 

3 <xheady 

4 xmeta charset="utf-8"> 

5 xtitleych19 9.html</title> 

6 xstyle> 

7 hi { display:inline; } 

8 #ex1 { font-size:30px; } 

9 #ex2 { font-size:18px; position:relative; left:3px; } 
16 #ex3 { font-size:18px; position:relative; top:5px; left:3px; } 
11 </style> 

12 </head> 

13 <body> 

14 “hl id="ex1"> 深 石 数字 科技 </h1> 

15 《hl id="ex2"> 深 度 学 习 滴水 穿 石 </h1> 

16 <br> 

17 《ht id="ex1"> 深 石 数字 科技 </h1> 

18 《ht id="ex3"> 深 度 学 习 滴水 穿 石 c/h1> 

19 </body> 

20 </html> 


深 石 数字 科技 清 变 学 习 满 水 穿 石 
深 石 数字 科技 洒 g 学 习 消 水 穿 厂 


19-4-2 position 属性 值 是 absolute 的 程序 实例 


当 position 的 属性 值 是 absolute 时 ， 也 可 以 使 用 top 
(上 边界 )、right 〈 右 边界 )、bottom (下 边界 )、left (左边 
界 ) 来 设 定位 移 。 位 移 基 于 浏览 器 窗口 的 左上 角 ， 可 参考 
右 图 。 以 这 种 方式 定位 区 块 时 ， 若 是 窗口 有 滚动 ， 则 区 块 ”一 一 


将 随 之 滚动 。 


left 


程序 实例 ch19_10.html : 重新 设计 ch3_10.html， 增 加 图 


片 ， 同 时 将 图 片 放 在 网 页 固定 位 置 。 这 个 程序 在 执行 时 ， 


如 果 深 动 浏览 器 窗口 ， 图 片 将 随 之 滚动 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ych19_10,html</title> 

6 <style> 

7 article { width;39epx; height:186px; background-color:yellow; } 
a aside { position:absolute; top:160px; left:320px; } 

9 </style> 

19 </head> 

11 tbody> 

12 <header> 

3 <hi>Silicon Stone Educationx/hly 

14 <p> 国际 认证 的 权威 机 构 ， 位 于 加 州 尔 湾 ，</p> 

15 </header> 

16 xarticley 

17 <hloBig Data Knowledgec/hl> 

18 《p> 大 数据 (Big Data) 已 成 为 目前 全 球 学 术 单位 、 政 府 机 关 以 及 

19 顶级 企业 必须 认真 面 对 的 挑战 ， 随 着 有 关 大 数据 的 程序 语言 、 


29 运算 平台 、 圣 础 理论 ， 以 及 诺 拟 化 、 守 器 化 技术 的 成 蕉 ， 了 解 
21 大 数据 的 原 迎 、 实 作 、 工 具 、 应 用 以 及 未 来 趋势 ， 将 会 是 求 
22 党、 进修 、 求 职 ， 深 造 的 必 名 技能 .</p> 


23 </article> 

24 xfootery 

25 <br> 

26 xpyCopyRight 2917, silicon stone Education, INC.¢/p> 
27 《/footery 

28 <aside> 

29 <img src="sselogo.jpg” height="160" width="158"» 

38 </aside> 

31 «</body> 

32 </html> 


| Silicon Stone Education 


| 国际 认证 的 权威 机 构 ， 位 于 加 州 尔 海 。 
| 
| 
| 


| 
| 
| em 
| 


| CopyRight 2017, Silicon Stone Education, INC. 
l 


下 列 是 窗口 高 度 不 足 时 ， 滚 动 窗口 ， 固 定位 
置 的 图 片 随 着 滚动 的 执行 结果 。 


Silicon Stone Education 
Ns ANN. FATA 
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19-4-3 position 属性 值 是 fixed 的 程序 实例 


当 position 的 属性 值 是 fxed 时 ， 也 可 以 使 用 top (上 边界 )、right (右边 界 )、bottom (下 边 


界 )、left〈 左 边界 ) 来 设 定位 移 。 位 移 基于 浏览 器 窗口 的 左上 角 。 以 这 种 方式 定位 区 块 时 ， 若 滚动 


窗口 ， 这 个 区 块 将 不 随 之 滚动 。 

程序 实例 ch19_11.html : 重新 设计 ch19 10.html， 将 aside 区 块 的 position 属性 设 为 ixed， 这 个 程 
序 重点 留意 第 8 行 。 

6 <style> 

7 articte { width:309px; height:189px; background-color:yellow; } 

8 aside { position:fixed; top:160px; left:320px; } 

9 </style> 


下 图 所 示 为 窗口 高 度 不 足 时 ， 滚 动 窗口 固定 位置 的 图 片 不 随 之 滚动 的 执行 结果 。 


Silicon Stone Education 


国际 认证 的 权 成 机 购 ， 位 于 加州 涤 。 


二 汪汪 | 


19-4-4 ”综合 应 用 


在 10-7 节 笔 者 曾经 探讨 网 页 布局 的 基本 结构 ， 下 面 将 以 一 个 实例 介绍 典型 的 网 页 布局 范例 。 


程序 实例 ch19_12.html : 设计 一 个 典型 的 网 页 布局 页 面 。 


1 <!doctype html> 36 <header><hl>header</hl></header> 
2 <html> 37 <nav><hl>nav</hl></nav> 

3 <head> 38 <article><hl>article</hi></article> 
4 <meta charset="utf-8"> 39 <aside><hl>aside</hl></aside> 
5 <title>ch19_12.html</title> 40 <footer><hl>footer</hl></footer> 
6 <style> 41 </body> 

7 hl { text-align:center; } 42 </html> 

8 header { 

9 position:fixed; width:100%; height:15%; i 

19 top:9pxy left:@px; 执行 结果 

11 background-color: lightyellow; 

12 } 

13 nav { 

14 position:fixed; width:100%; height:15%; 

15 top:15%; left:0px; 

16 background-color:aqua; 

17 } 

18 article { 

19 position:fixed; width:79%; height:55%; 

20 top:30%; left:0%; 

21 background-color:greenyellow; 

22 } 

23 aside { 

24 position:fixed; width:30%; height:55s; 

25 top:30%; left:70%; 

26 background-color:pink; 

up } 

28 footer { 

29 position:fixed; width:100%; height:15%; 

30 top:85%; left:0%; 

31 background-color:yellow; } 

32 } 

33 </style> 

34 </head> 

35 <body> 
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设 定 与 解除 图 旁 串 字 


这 个 功能 可 以 设 定 元 素 内 容 包 围 之 前 设 定 的 图 片 。 本 节 所 说 的 图 旁 串 字 功能 ， 不 局 限于 串 图 
片 ， 也 可 以 是 区 块 层级 或 行内 层级 的 盒子 。 


19-5-1 设 定 图 旁 串 字 的 float 属性 
它 的 使 用 格式 如 下 : 


float: none | left | right | initial | inherit; 


口 none : 默认 值 ， 表 示 不 使 用 图 旁 串 字 功 能 。 

口 left : 令 图 旁 串 字 ， 图 片 在 左 。 

口 right : 令 图 旁 串 字 ， 图 片 在 右 。 

程序 实例 ch19_13.html : 重新 设计 ch12_1.html。 这 个 程序 设 定 了 图 旁 串 字 功能 ， 图 片 在 右 ， 读 者 
需 留意 第 7 和 15 行 的 图 旁 串 字 设 计 方 法 。 


1 <ldoctype html> 于 结 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch19 13,html</title> 我 的 旅游 经 历 

6 <style> As 1,2018 

用 img { float:right; padding:10px; } 2006f2 月 为 了 和 辽 汉江 和 这 而 模 岂 QNohern 时 
-i i 
9 #dateinfo { text-align:right; } Pe 此 北 楼 

19 #content { text-align:justify; } Ce 第 人 最 后 S 全 庆 大 网， 月 理 度 生 枉 ， 这 炎炎 习 机 
11 #signature { text-align;left; } 过 周 拉 其 加 最 北城 市 。 北 由 海 . 

12 </style> 洪 锦 扯 

13 </head> 

14 <body> 


15 <img src="antarctica2, jpg" width="200"> 

16 <h1> 我 的 旅游 经 历 </h1> 

17 <p id="dateinfo">Aug. 1, 2018</p> 

18 <p id="content">2066 年 2 月 为 了 享受 边 兆 温 泉 边 看 极光 (Northern Light)， 
19 一 人 独自 坐 飞 机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 接近 北极 圈 的 

26 Chena Hot Springs 温 泉 渡 假 村 。 旅 游 期 间 尝 试 开车 直达 北极 海 (Arctic Ocean) 
21 ， 第 一 次 车 子 在 冰天雪地 打滑 ， 撞 山 整 失败 而 返 。 第 二 次 碰 上 暴风 委 

22 ， 再 度 失败 。2697 年 2 月 再 度 前 往 ， 这 次 坐 飞机 直达 阿拉 斯 加 最 北城 市 

23 ， 终 于 抵达 北极 海 

24 </p> 

25 <p id="signature"》 洪 锁 魁 </p> 

26 </body> 

27 </html> 


程序 实例 ch19_14.html : 重新 设计 ch19_13.html， 使 图 位 于 串 字 的 左边 ， 下 面 是 第 7 行 的 内 容 。 


7 img { float:left; padding:10px; } 执行 结 


我 的 旅游 经 历 


Ang 1,2018 


泡 温 果 边 看 要 区 
符 飞 机 至 辣 拉 斯 加 (Alaska)， 


北 抽风 的 Ch Hot Spa 

TE 

Ocean) 地 打 深 ， 报 山 克 

失 数 而 返 . 第 二 次 磁 上 术 风 轨 ， 再度 2 
过 阿拉 斯 加 最 北城 击 。 闪 于 抵达 北极 海 - 


庄 锦 旺 


第 19 章 


前 面 说 过 图 旁 串 字 功 能 不 限于 图 片 ， 下 面 是 将 此 功能 应 用 在 表格 时 的 实例 。 
程序 实例 ch19_15.html : 将 图 旁 串 字 功 能 应 用 在 表格 ， 表 格 在 右边 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 emeta charset="utf-a"> 
5 <titleychl9 15.html</title> 
6 <style> 

table { float:right; } 

8 </style> 

9 </head> 

10 <body> 

11 <table border="1"> 

12 <theady<!-- 建 立 表 头 --> 

3 <tr><th> 河 流 名 称 </th><th> 国 家 </th><th> 洲 名 </th></tr> 
14 /thead> 

15 <tr><td> 黄 河 (/td><td> 中 国 ec/td><td> 亚 洲 </td></tr> 

16 <tr><td> 尼 罗 河 </td><td> 埃 及 </td><td> 非 洲 ¢/td></tr> 
17 。 <tr?ktdy 亚 马 进 河 </td>ctd> 巴 西 cjtdyktd> 丙 美洲 c/td>c/try 
18 </table> 

19 “ha 世界 地 理 </hay 

29 <“p?> 水 是 人 类 生活 不 可 或 缺 的 一 部 分 ， 所 以 人 类 的 文明 

21 的 起 源 皆 与 河流 有 关 。 因 此 埃及 文明 起 源 于 尼罗河 ， 中 国 

22 文明 起 源 于 其 潭 流域， 次 关 洲 文 明 起 源 于 亚马逊 河 ,</p> 

23 </body> 

24 </html> 


定位 与 网 页 排版 


世界 地 理 ELE 
员 河 | 中 国 | 亚 济 

水 是 人 类 生活 不 可 或 缺 的 一 尼罗河 _| 埃 及 | 非洲 

所 以 人 类 的 文明 的 起 源 皆 与 河流 | 正己 还 河 | 世 两 | 南 关 洲 


有 关 。 因此 埃及 文明 起 
河 ， 中 国 文明 起 源 于 黄河 流域 ， 南 美洲 文明 起 源 于 亚马逊 
河 。 


19-5-2 清除 图 旁 串 字 的 clear 属性 


某 段 文字 应 用 图 旁 串 字 功 能 时 ， 如 果 想 在 中 途 禁 用 图 旁 串 字 ， 可 以 使 用 清除 图 旁 串 字 功 能 。 它 
的 使 用 格式 如 下 : 


clear: none | 


none : 默认 值 ， 表 示人 允许 图 旁 串 字 。 

left : 图 片 在 左 时 ， 不 允许 左边 进行 图 旁 串 字 。 

right : 图 片 在 右 时 ， 不 允许 右边 进行 图 旁 串 字 。 

both : 不 允许 在 图 左边 或 右边 进行 图 旁 串 字 。 

程序 实例 ch19_16.html : 重新 设计 ch19_13.html。 这 个 程序 在 “旅游 期 间 ……” 段 落 处 清除 图 旁 


left | right | both | initial | inherit; 


OOO DO 


串 字 功能 。 请 留意 第 12 和 22 行 代码 ， 这 个 程序 在 第 22 行 中 断 了 图 旁 串 字 功能 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>chi9 16.html</title> 

5 <style> 

7 img { float:right; padding;10px; } 
8 hl { text-align:center; } 


9 #dateinfo { text-align:right; } 
19 #content { text-align:justify; } 
11 #signature { text-align:left; } 
12 #textaroundbreak { clear:right; } 
13 </style> 

14 </head> 

15 <body> 


16 <img src=" .jpg” width="290"> 


17 <h1> 我 的 旅游 经 历 </h1> 
18 <p id="dateinfo">Aug. 1, 2018</p> 


19 <p id="content">2986 年 2 月 为 了 享 登 边 光 温 泉 边 看 极光 (Northern Light)， 


29 一 人 独自 坐 飞机 至 阿拉 斯 加 (Alaska)， 再 开车 往 北 至 共 近 北极 | 
21 Chena Hot Springs 温 永 流 俱 村 。 </py 

22 <p id="textaroundbreak"> 旅 游 期 间 兰 试 开车 直达 北极 海 (Arctic Ocean) 
23 ， 第 一 次 车 子 在 冰天雪地 打 滞 ， 挤 山 璧 失败 而 返 第 二 次 碰 上 短 风 要 

24 ， 再 度 失败 。2897 年 2 月 再 度 前 往 ， 这 次 坐 飞 机 直达 阿拉 斯 加 最 北城 市 

25 ， 阁 于 抵达 北极 海 。</py 

26 <p id-"signature"> 洪 镍 魁 </p> 

27 </body> 

28 </html> 


我 的 旅游 经 历 
| Aug. 1.2018 
2006 年 2 月 为 了 享受 边 泡 温 泉 边 看 极光 
| (Northem LighD， -人 独自 举 飞 机 至 阿拉 斯 


| 如 (Alaska)， 再 开车 往 北 至 接近 北极 轿 的 
Chena Hot Springs 温 录 流 假 村 。 
旅游 期 问 穴 试 开车 直达 北极 海 (Arctic Ocean) ， 第 “次 车 子 在 冰天雪地 打滑 ， 
撞 山 攻 失 败 而 返 。 第 一 次 磁 上 基 风 委 。 再 度 失 ! 
次 坐 飞机 直达 阿拉 斯 加 最 北城 市 ， 终 于 抵达 北极 海 。 


洪 饮 魁 


- 2007 年 2 月 再 度 前 往 ， 这 
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程序 实例 ch19_17.html : 如 果 设 计 网 页 花费 的 时 间 过 长 ， 也 许 一 时 头 昏 ， 不 知 要 使 用 left 还 是 
right 来 中 断 图 旁 串 字 功能 ， 此 时 可 以 参考 本 实例 ， 使 用 both 属性 值 ， 如 下 所 示 : 


12 textaroundbreak { clear:both; } 


这 个 程序 执行 结果 与 前 一 程序 相同 。 


由 写 记 堆 芭 顺序 


元 素 重 登 时 ， 可 以 使 用 z-index 属性 值 设 定 堆 全 顺序 ， 数 值 越 大 ， 则 越 在 上 方 。 它 的 使 用 格式 
如 下 了 


z-index: auto | number | initial | inherit; 


口 _ auto : 默认 值 ， 表 示 数 值 与 父 元 素 相同 。 
口 number : 直接 设 定 堆 芭 数字 ， 可 为 负 值 。 
程序 实例 ch19_18.html : 重 迭 数据 的 输出 。 这 个 程序 先 输出 标题 “南极 大 陆 ” 再 输出 图 片 ， 先 


输出 的 标题 被 后 输出 的 图 片 迹 住 了 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

全 <title>ch19_18.html</title> 

6 <style> 

7 img { position:absolute; width:400px; 
8 top:19px; left:16px; 


16 hl { position:absolute; width:46epx3 

11 top:35px; left;16px; 

12 background-color :rgba(255,255,9,9,2); 
13 text-align:centers 


} 
15 </style> 
16 </head> 
17 <body> 
18 <h1> 南 极 大 陆 </h1> 
19 <img src="antarctica2,jpg"> 
28 </body> 
21 </html> 


程序 实例 ch19_19.html : 重新 设计 ch19_18.html， 但 是 在 第 9 行将 图 片 的 堆 芭 顺序 设 为 1， 第 15 行 
将 输出 标题 1“ 南 极 大 陆 ” 的 堆 全 顺序 设 为 2， 由 于 标题 的 堆 合 顺序 较 高 ， 所 以 可 以 显示 出 此 标题 。 


7 img { position:absolute; width:400px; 执行 结果 


8 top:10px; left:10px; 

9 z-index:1; 

10 » 

11 hl { position:absolute; width:480px; 

12 top:35px; left:10px; 

13 background-color: rgba(255,255,0,0.2); 
14 text-align:center; 

15 z-index:2; 

16 } 


17 </style> 
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显示 或 隐藏 元 素 的 visibility 属性 


这 个 属性 的 使 用 格式 如 下 : 


visibility: visibility | hidden | collapse | initial | inherit7 


visibility : 显示 元 素 。 
hidden : 不 显示 元 素 ， 但 是 仍 占据 空间 。 如 果 不 想 占 据 空间 ， 需 再 加 上 “display:none” 属 性 。 
collapse : 这 个 值 用 在 表格 中 ， 可 以 隐藏 某 行 或 某 栏 。 

序 实 例 ch19_20.html : 隐藏 元 素 的 应 用 但 令 其 仍 占据 空间 。 


程 
1 <!doctype html> 
2 <html> 
3 
4 
5 
6 
8 


DO0O 


<head> 
<meta charset="utf-8"> 
<title>ch19_20.html</title> 
<style> 
#exl { background-color:aqua; visibility:hidden; } 
#ex2 { background-color:yellow; color:blue;} 
</style> 
10 </head> 
11 <body> 
12 <hl id="ex1">HTML 5 + CS53</hl> 
13 <hl id="ex2">HTML 5 + CSS3</h1> 


加 


14 </body> 
15 </html> 

程序 实例 ch19_21.html : 隐藏 元 素 的 应 用 同时 令 其 不 占据 空间 。 下 面 是 与 ch19_20.html 不 同 的 程 
序 代码 。 

入 wexl { background-color:aqua; visibility:hidden; display:inone;} 

下 方 左 、 右 图 分 别 是 ch19_20.html 和 ch19_21.html 的 执行 结果 。 


思潮 汪 用 box 调整 元 素 呈 现 方式 的 object-fit 属性 


这 个 属性 常用 在 设 定 图 片 在 盒子 里 的 呈现 方式 。 


object-fit: none | contain | cover | fill | initial | inherit; 
none : 默认 值 ， 表 示 图 片 保持 原 尺寸 。 

contain : 图 片 需 保持 原 比例 全 部 显示 ， 但 可 能 无 法 填 满 盒子 。 

cover : 图 片 需 保持 原 比 例 ， 同 时 填 满 盒子 ， 所 以 可 能 部 分 元 素 无 法 显示 。 
fill : 图 片 填 满 盒子 ， 但 是 图 片 不 保持 原 比例 。 


注意 ， 目 前 只 有 Opera 浏览 器 支持 此 属性 。 


OODODO DO 
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程序 实例 ch19_22.html : object-fit 属性 的 测试 ， 这 个 程序 将 列 出 所 有 属性 值 的 执行 结果 。 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>ch19 22.html</title> 
<style> 
img#box-none { border:solid 3px blue; width:209px; height:190px; object-fit:none; } 
9 img#box-contain { border:solid 3px blue; width:280px; height:1990px; object-fit:contain; } 
10 img#box-cover { border:solid 3px blue; width:200px; height:109px; object-fit:cover; } 
11 img#box~fill { border:solid 3px blue; width:200px; height:100px; object-fit:fill; } 
12 </style> 
13 </head> 
14 <body> 
15 <p>0bject-fit:none</p> 
16 <img src="starl.gif” id="box-none"> 
17 <p>object-fit:contain</p> 
18 <img src="starl.gif" id="box-contain"> 
19 <p>object-fit:cover</p> 
20 <img src="starl.gif" id="box-cover"> 
21 <p>object-fit:fill</p> 
22 <img src="starl.gif" id="box-fill"> 
23 </body> 
24 </html> 


执 


四 wmawnmP 


十 i 


88 | BD fie///D/HTMLS*CSS3/ch19/ch19 22%20.html ©O 由 


9 22html 


object-fit:contain 


object-fitcover 


object-fitfl 


| 设 定 垂直 对 齐 的 vertical-align 属性 


这 个 属性 可 以 设 定 行内 层级 的 对 齐 方式 ， 格 式 如 下 。 
vertical-align: baseline | sub | super | top | text-top | middle 


text-bottom |length | 当 | inherit; 


bottom 
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baseline : 默认 值 ， 表 示 元 素 放 在 父 元 素 基 线 。 

Sub : 垂直 对 齐 本 文 下 标 。 

Super : 垂直 对 齐 本 文 上 标 。 

top : 元 素 顶 端 与 行 中 最 高 元 素 的 顶端 切 齐 。 

text-top : 元 素 顶 端 与 父 元 素 的 顶端 切 齐 。 

middle : 元 素 放 在 父 元 素 垂直 居中 位 置 。 

bottom : 元 素 底 端 与 最 低 元 素 底 端 切 齐 。 

text-bottom : 元 素 底 端 与 父 元 素 底 端 切 齐 。 

length : 使 用 长 度 值 设 定 ， 可 参考 附录 D。 

% : 使 用 line-height 的 百分比 值 设 定 高 于 或 低 于 的 距离 ， 允 许 负 值 。 
程序 实例 ch19_23.html : vertical-align 的 应 用 。 第 一 条 输出 的 图 片 是 和 父 元 素 顶 端 切 齐 ， 第 二 条 输 
出 的 图 片 是 和 父 元 素 底 端 切 齐 。 


1 sldoctype htmly 2 二 疆 
2 xhtmly 执行 结果 


3 <head> 


4 ‘<meta charset="utf-8"> wi 
5 <title>ch19 23.html</title> 深 石 数字 
6 <style> 

7 

8 


OoOoOOoOOoOoOooOooOoOOoo DO 


img.in-top { vertical-align:text-top; border'blue solid;} 


img. in-bottom { vertical-align:text-bottom; border:blue solid; } 
9 </style> 
19 </head> Re 次 深 石 数字 


11 <body> 
12 <p>Deepstone<img class-"in-top”src-"starl.gif") 深 石 数字 </p> 
13 <p>Deepstonecimg class="in-bottom”src="star1.gif") 深 石 数字 </p> 


14 </body> 
15 </html> 


习题 

1. 请 美化 ch19_10.html。 

2. 请 参考 10-7 节 的 典型 网 页 布局 ， 扩 充 ch19 12.html， 在 <article> 位 置 设计 <section>， 然 后 将 
<article> 放 入 <section> 区 块 内 , 同时 美化 这 个 网 页 。 

3. 请 重新 编写 ch10_17.html 程序 ， 将 这 个 程序 的 数据 套用 在 习题 2 的 网 页 布局 内 ， 设 计时 可 以 自行 
调配 个 网 页 区 块 的 比例 ， 同 时 请 美化 这 个 网 页 。 

4. 请 参考 以 上 习题 ， 设 计 一 个 家 庭 网 页 ， 具 体内 容 请 发 挥 所 学 与 创意 。 


使 用 弹性 容器 ( flexible 
container ) 排版 


本 章 摘要 

20-1 flex Container 的 基本 概念 

20-2 ”弹性 容器 的 声明 

20-3” 设 定 版 面 方向 (flex-direction ) 

20-4 ” 设 定 弹性 区 块 内 为 多 行 排列 (flex-wrap ) 
20-5 ”直接 设 定 排版 方向 和 行 数 ( flex-flow ) 
20-6 ”版 面 区 块 的 排列 顺序 ( order ) 

20-7 ”增加 版 面 区 块 对 象 宽度 ( flex-grow ) 
20-8 缩减 版 面 区 块 对 象 宽度 ( flex-shrink ) 
20-9 调整 前 的 区 块 对 象 宽度 (flex-basis ) 
20-10 增 减 区 块 宽度 的 简易 表示 法 (flex ) 
20-11 ” 设 定 留 白 的 方式 (justify-content ) 
20-12 ”垂直 方向 留 白 的 处 理 ( align-items ) 
20-13 ”个 别 版 面 区 块 留 白 的 处 理 ( align-self ) 
20-14 ”弹性 容器 有 多 行 版 面 区 块 时 留 白 的 处 理 ( align-content) 
20-15 综合 应 用 


本 章 介绍 的 是 CSS3 新 的 网 页 排版 概念 ， 相 较 于 前 一 章 使 用 position 或 float 属性 进行 排 
版 ， 是 更 简洁 易 懂 的 网 页 排版 概念 。 


i 
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| 20-1 | flex container 的 基本 概念 


弹性 区 块 排版 的 概念 是 ， 建 立 一 个 弹性 容器 (flex container)， 在 此 容器 内 建立 弹性 对 象 ( 读 者 
可 将 此 对 象 想 成 是 网 页 区 块 (box)， 然 后 使 用 flex-direction 属性 设 定 网 页 区 块 排版 方式 。 如 果 flow- 
direction 属性 值 是 row 时 ， 弹 性 对 象 〈 或 称 网 页 区 块 ) 排版 方式 如 下 : 
弹性 区 块 容器 flex container 


» 


弹性 对 象 fexitem 1 | ”弹性 对 象 flex item 2 .… 弹 性 对 象 flex item n 


» 


弹性 区 块 排版 方向 
如 果 flow-direction 属性 值 是 column， 弹 性 对 象 排 版 方式 如 下 : 


弹性 容器 (flex container) 


弹性 区 块 排版 方向 


弹性 对 象 flex item 2 


弹性 对 象 flex item n 


| 20-2 弹性 容器 的 声明 


前 一 章 笔者 已 经 介绍 过 display 属性 ， 其 实 这 个 属性 在 CSS3 新 增 功能 可 以 用 来 声明 弹性 区 块 ， 
它 的 使 用 格式 如 下 : 


display: flex | inline-flex; 
口 _ flex : 将 此 元 素 设 为 区 块 层级 ( block level ) 的 弹性 容器 。 
口 inline-flex : 将 此 元 素 设 为 行内 层级 ( inline level ) 的 弹性 容器 。 
程序 实例 ch20_1.html : 在 弹性 容器 内 ， 建 立 3 个 网 页 区 块 。 


1 <!doctype html> 8 width:600px; height:300px; bor 
2 <html> 9 display:flex; 

3 <head> 10 } 

4 <meta charset="utf-8"> 11 #iteml { 

5 <title>ch20_1.html</title> 12 width:300px; background-color: 
6 <style> 3 

7 #container { 14 #item2 { 
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15 width:100px; background-color:pink; 执行 结果 | 
16 } 

17 #item3 { 

18 width:200px; background-color:aqua; 
19 } 

20 </style> 

21 </head> 

22 <body> 

23 <div id="container"> 

24 <div id="iteml">fLex iteml</div> 

25 <div id="item2">flex item2</div> 

26 <div id="item3">flex item3</div> 

27 </div> 

28 </body> 

29 </html> 


在 弹性 容器 建立 网 页 区 块 时 ， 若 是 没有 整个 填 满 ， 将 留 下 空白 区 块 ， 可 参考 以 下 实例 。 
程序 实例 ch20_2.html : 重新 设计 ch20_1.html， 但 是 网 页 区 块 没有 填 满 弹性 容器 ， 同 时 这 个 程序 也 
利用 第 7 行 ， 重 新 设 定 了 字号 和 粗 体 字体 。 


1 <!doctype html> 25 <div id="iteml">flex iteml</div> 
2 <html> 26 <div id="item2">flex item2</div> 
3 <head> 27 <div id="item3">flex item3</div> 
4 <meta charset="utf-8"> 28 </div> 

EJ <title>ch20_2.html</title> 29 </body> 

6 <style> 30 </html> 

和 div { font-size:22px; font-weight:bold; } 

8 #container { pep 本 

9 width:600px; height:309px; border:3px sotid blue; 下 图 右边 没有 填 满 的 区 块 
10 display:flex; 

i 称 为 留 白 。 

12 #iteml { 

13 width:300px; background-color:yellow; 

14 } 

15 #item2 { 

16 width:100px; background~color:pink; 

17 } 

18 #item3 { 

19 width:150px; background-color:aqua; 

20 } 

21 </style> 

22 </head> 

23 <body> 


24 <div id="container"> 


| 20-3 | 设 定 版 面 方向 (flex-direction ) 


这 个 属性 可 以 设 定 以 水 平 或 垂直 方向 编排 版 面 。 


flex-direction: row | row-reverse | column | column-reverse | 


initial | inherit; 


row : 默认 值 ， 以 水 平方 向 由 左 到 右 编排 。 
row-reverse : 以 水 平方 向 由 右 到 左 编排 。 
column : 以 垂直 方向 由 上 到 下 编排 。 
column-reverse : 以 垂直 方向 由 下 到 上 编排 。 


口 
口 
口 
口 
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程序 实例 ch20_3.html : 将 flex-direction 属性 设 为 row-reverse， 重 新 设计 ch20 1.html。 相 较 于 
ch20_1.html， 这 个 程序 增加 了 第 10 行 ， 与 ch20_1.html 的 不 同 之 处 如 下 。 


7 #container { 一 

8 width:600px; height:300px; border:3px solid blue; 执行 结果 
9 display:flex; 

19 flex-direction: row-reverse; 

11 


程序 实例 ch20_4.html : flex-direction 属性 为 column 时 的 应 用 。 


1 <!doctype html> 
2 <htnl> 执行 结果 


3 <head> 
4 <meta charset="utf-8"> 

本 <title>ch20_4.html</title> 
6 <style> 
7 
8 


#container { 
width:600px; height:400px; border:3px solid blue; 


9 display:flex; 

10 flex-direction:column; 

11 } 

12 #iteml { 

13 height:209px; background-color:yellow; 
14 } 

15 #item2 { 
16 height:75px; background-color:pink; 
17 

18 #item3 { 

19 height:125px; background-color:aqua; 
20 } 

21 </style> 

22 </head> 

23 <body> 


24 <div id="container"> 

25 <div id="iteml">fLex iteml</div> 
26 <div id="item2">flex item2</div> 
27 <div id="item3">flex item3</div> 
28 </div> 

29 </body> 

30 </html> 


| 20-4 | 设 定 弹 性 区 块 内 为 多 行 排列 (flex-wrap ) | 


之 前 所 介绍 的 弹性 容器 只 有 单行 版 面 区 块 ，flex-wrap 属性 可 以 让 弹性 容器 内 的 区 块 为 多 行 ， 并 
且 原 则 上 一 行 放 不 下 时 ， 版 面 区 块 在 新 的 一 行 输出 。 


flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit; 


口 nowrap : 默认 值 ， 表 示 弹 性 容器 只 有 一 行 。 
口 ”wrap : 设 定 弹性 容器 允许 多 行 配置 。 
口 “wrap-reverse : 设 定 弹性 容器 允许 多 行 配 置 ， 在 第 二 行 配置 时 ， 为 反 向 方式 配置 。 
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程序 实例 ch20_5.html : 弹性 容器 有 两 行 版 面 区 块 配置 。 这 个 程序 并 没有 设 定 区 块 高 度 (height)， 


浏览 器 采用 均 分 高 度 方式 处 理 。 
1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch20_5.html</title> 
6 <style> 
#container { 
8 width:500px; height:300px; border:3px solid blue; 
9 display:flex; 
10 flex-direction: row; 
11 flex-wrap:wrap; 
12 3 
13 #iteml { 
14 width:200px; background-color:yellow; 
15 } 
16 #item2 { 
17 width:200px; background-color:pink; 
18 } 
19 #item3 { 
20 width:80px; background-color:aqua; 
21 } 
22 #item4 { 
23 width:250px; background-color:lightgreen; 
24 业 
25 #item5 { 
26 width:100px; background-color: lightblue; 
27 } 
28 </style> 
29 </head> 
30 <body> 


31 <div id="container"> 

部 <div id="item1">flex iteml</div> 
33 <div id="item2">flex item2</div> 
34 <div id="item3">flex item3</div> 
站 <div id="item4">flex item4</div> 
36 <div id="item5">flex item5</div> 
37 </div> 

38 </body> 

39 </html> 


程序 实例 ch20_6.html : 将 flex-wrap 属性 值 设 为 wrap-reverse， 重 新 设计 ch20_5.html。 这 个 程序 只 
修改 了 第 11 行 ， 如 下 所 示 。 


flex-wrap:wrap-reverse; 
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目前 实例 在 弹性 容器 内 安置 的 版 面 区 块 丝 使 用 默认 高 度 ， 浏 览 器 会 依据 版 面 区 块 行 数 自行 平均 
处 理 。 如 果 我 们 有 设 定 高 度 ， 且 有 未 使 用 的 高 度 ， 浏 览 器 也 会 将 未 使 用 的 高 度 平均 分 配 。 
程序 实例 ch20_7.html : 重新 设计 ch20_5.html， 这 个 程序 设 定 了 版 面 区 块 的 高 度 。 


1 <!doctype html> 


ne bE 和 起 对 ”从 执行 结果 可 以 发 现 ， 空 白 
$a hie 平均 分 配 在 各 行 版 面 区 块 间 。 

<styu 
LH le { 
8 width:5e0px; height:300px; border:3px solid blue; 


罗 
东 


9 display: flex; 


19 flex-direction: row; 

11 flex-wrap:wrap; 

12 本 

13 #itenl { 

14 height:190px; width:200px; background-color:yetlow; 
15 } 

16 #item2 { 

17 height:100px; width:200px; background-color:pink; 
18 } 

19 #iten3 { 

20 height:100px; width:80px; background-color:aqua; 
21 } 

2 #item4 { 

23 height:100px; width:250px; background-color: lightgreen; 
24 } 

25 #item5 { 

26 height:100px; width:190px; background-color: lightblue; 
27 } 

28 </style> 

29 </head> 

30 <body> 


31 <div id="container"> 
32 <div id="iteml">flex iteml</div> 
33 <div 1d="item2">flex iten2</div> 
34 <div 1d="item3">flex item3</div> 
35 <div id="item4">flex item4</div> 
36 <div id="item5">flex item5</div> 
37 </div> 
38 </body> 
39 </html> 


| 20-5 直接 设 定 排版 方向 和 行 数 (flex-flow ) 


这 是 flex-direction 和 flex-wrap 属性 的 简易 表示 法 ， 格 式 如 下 。 

flex-flow: flex-direction | flex-wrap | initial | inherit; 
口 _flex-direction : 可 能 值 可 参考 20-3 节 。 口 flex-wrap : 可 能 值 可 参考 20-4 节 。 
程序 实例 ch20_8.html : 以 flex-flow 属性 重新 设计 ch20_7.html， 以 如 下 所 示 的 第 10 行 取代 原先 的 
第 10 和 第 11 行 。 


7 #container { Z 二 J 十 a 
8 width:500px; height:399px; border:3px sotid blue; KE 与 ch20 7.html 相同 。 
9 display: flex; 

10 flex-flow: row wrap; 

11 } 


| 20-6 版 面 区 块 的 排列 顺序 (order ) 


目前 所 有 版 面 区 块 出 现 的 顺序 都 是 以 代码 中 出 现 的 顺序 排列 ，order 属性 可 以 更 改 这 个 排列 顺 
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序 ， 令 较 小 的 值 优 先 排列 ， 如 果 值 相同 则 依 代码 中 出 现 的 顺序 排列 。 


order: number | initial | inherit; 


口 number : 默认 值 是 0， 可 以 由 此 设 定 正 整数 。 


程序 实例 ch20_9.html : 将 order 属性 应 用 在 单行 弹性 容器 的 应 用 。 


1 <!doctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch20_9.html</title> 

6 <style> 

3 #container { 

8 width:600px; height:300px; border:3px solid blue; 


9 display:flex; 

10 } 

11 #iteml { 

12 width:390px; background-color:yellow; 
13 order:1; 

14 } 

15 #item2 { 

16 width:109px; background-color:pink; 
17 order:0; 

18 } 

19 #item3 { 

20 width:200px; background-color:aqua; 
21 order:1; 

22 } 

23 </style> 

24 </head> 

25 <body> 


26 <div id="container"> 

27 <div id="item1">flex iteml</div> 
28 <div id="item2">flex item2</div> 
29 <div id="item3">flex item3</div> 
30 </div> 

31 </body> 

32 </html> 


本 例 中 ， 由 于 item2 的 order 值 


是 0， 所 以 最 优先 ; iteml 和 item3 的 order 值 皆 
是 1， 依照 程序 代码 先后 顺序 排版 ， 所 以 得 到 下 
图 所 示 的 结果 。 


程序 实例 ch20_10.html : 将 order 属性 应 用 在 多 行 的 弹性 容器 的 应 用 。 


1 <!doctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29_10.html</title> 

6 <style> 

7 #container { 

8 width:5e0px; height:300px; border:3px solid blue; 


9 display: flex; 

19 flex-flow: row wrap 

11 } 

12 #iteml { 

13 height:199px; width:209px; background-color:yellow; 
14 ordersl 

15 by 

16 #item2 { 

17 height:199px; width:200px; background-color:pink; 
18 order:2; 

19 } 

29 #item3 { 

21 height:100px; widths8gpx; background-color:aqua; 
22 } 

23 #item4 { 

24 height:109px; width:200px; background-color: lightgreen; 
25 order:1; 

26 } 

27 #item5 { 

28 height:190px; width:100px; background-color: lightblue; 
29 order:2; 

38 } 

31 </style> 


32 </head> 


33 <body> 

34 <div id="container"> 

35 <div id="itenl">flex iteml</div> 
36 -<div id="iten2">flex item2</div> 
37 <div id="iten3">flex item3</div> 
38 <div id="item4">flex item4</div> 
39 <div id="item5">flex iten5</div> 
40 </div> 

41 </body> 

42 </htmt> 
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| 20-7 增加 版 面 区 块 对 象 宽度 (flex-grow ) 


在 将 版 面 区 块 对 象 放 入 弹性 容器 时 ， 如 果 区 块 对 象 总 宽度 小 于 弹性 容器 宽度 ， 将 有 留 白 产生 ， 
为 了 不 产生 留 白 ， 可 以 将 个 别 版 面 区 块 适度 放大 ， 这 也 是 本 节 的 重点 。flex-grow 属性 可 以 设 定 留 白 
分 配 比例 ， 例 如 ， 如 果 留 白 是 30px， 如 果 A 对 象 的 flex-grow 值 是 1，B 对 象 的 flex-grow 值 是 2， 
则 A 对 象 可 以 分 配 1/3 的 留 白 ， 相 当 于 10px，B 对 象 可 以 分 配 2/3 的 留 白 ， 相 当 于 20px。 它 的 使 用 
格式 如 下 : 


flex-grow: number | initial | inherit; 


口 _number : 默认 值 是 0， 这 是 相 较 于 其 他 版 面 区 块 对 象 的 放大 比例 。 


程序 实例 ch20_11.html : 这 个 实例 设置 了 两 个 弹性 容器 ， 第 一 个 弹性 容器 刚好 均 分 对 象 ， 所 以 没 

有 留 白 的 问题 ; 第 二 个 弹性 容器 多 了 200px 的 留 白 ， 由 程序 第 18、19、20 行 可 知 ， 第 一 个 区 块 对 象 
分 得 1/6 留 白 ( 约 33px)， 第 二 个 区 块 对 象 分 得 2/6 留 白 ( 约 67px)， 第 三 个 区 块 对 象 分 得 3/6 留 白 
(100px)。 


1 <!doctype htmt> Z 二 4 士 
2 执行 结果 


4 <neta charset="utf-8"> 
5 <title>ch20_11.html</title> 

6 <style> 

7 #containerl { 

8 width:390px; height:109px; border:3px solid blue; 


9 display: flex; | 
19 中 

11 #iteml-1 { width:199px; background-color:yellow; flex-grow:1; } 

12 #iteml-2 { width:190px; background-color:pink; flex-grow:2; } 

13 #iteml-3 { width:199px; background-color:aqua; flex-grow:3; } 


14 #container2 { 

15 width:500px; height:100px; border:3px solid blue; 

16 display: flex; 

17 } 

18 #item2-1 { width:199px; background-color:yellow; flex-grow:1; } 
19 #item2-2 { width:180px; background-color:pink; flex-grow:2; } 
20 #item2-3 { width:190px; background-color:aqua; flex-grow:3; } 
21 </style> 

22 </head> 

23 <body> 


24 <div id="containerl"> 

25 <div id="itenl-1">flex iteml</div> 
26 <div id="iteml-2">flex iten2</div> 
27 <div id="iteml-3">flex iten3</div> 
28 </div> 

29 <hr> 

30 <div id="container2"> 

31 <div id="item2-1">flex itenl</div> 
32 <div id="item2-2">flex iten2</div> 
33 <div id="item2-3">flex item3</div> 
34 </div> 

35 </body> 

36 </html> 


| 20-8 | 缩减 版 面 区 块 对 象 宽度 (flex-shrink ) 


在 将 版 面 区 块 对 象 放 入 弹性 容器 时 ， 如 果 区 块 对 象 总 宽度 大 于 弹性 容器 宽度 ， 从 排版 的 角度 看 
就 会 产生 出 血 ， 为 了 不 产生 出 血 ， 可 以 将 个 别 版 面 区 块 适度 缩小 ， 这 也 是 本 节 的 重点 。 事 实 上 ， 浏 
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览 器 会 依 各 版 面 区 块 宽度 成 比例 地 调整 宽度 。 

CSS 的 这 个 属性 可 以 设 定 分 配给 各 区 块 缩小 的 比例 ， 例 如 ， 如 果 出 血 是 30px，A 对 象 的 Hex- 
shrink 值 是 1，B 对 象 的 flex-shrink 值 是 2， 则 A 对 象 需 分 担 1/3 出 血 量 (相当 于 减少 10px)，B 对 
象 需 分 担 2/3 出 血 量 (相当 于 减少 20px)。flex-shrink 的 使 用 格式 如 下 : 


flex-shrink: number | initial | inherit; 


口 number : 默认 值 是 0， 这 是 相 较 于 其 他 版 面 区 块 对 象 的 缩小 比例 。 


程序 实例 ch20_12.html : 这 个 实例 设置 两 个 弹性 容器 ， 第 一 个 弹性 容器 中 的 对 象 刚好 均 分 ， 所 以 
不 会 产生 出 血 的 问题 ; 第 二 个 弹性 容器 少 了 300px， 由 程序 第 18、19、20 行 可 知 ， 第 一 个 区 块 对 
象 需 分 担 116 〈50px) 出 血 量 ， 第 二 个 区 块 对 象 需 分 担 2/6〈(100px) 出 血 量 ， 第 三 个 区 块 对 象 需 分 担 
3/6 出 血 量 〈150px)。 


<!doctype html> J 二 J 十 
mb 执行 结果 
‘ht 


| i 


<style> 
#containerl { 


1 
2 

3 

4 

5 <titte>ch26_12.htmt</titte> 

6 

7 

8 width:600px; height:100px; border:3px solid blue; 


9 display: flex; 
10 》 

11 tteml-1 { width:290px; background-color:yellow; flex-grovs1; flexrshrink:3; } 
12 #itenl-2 { width:200px; background-color:pink; flex-grow:2; flex-shrink:2; } 
13 #itenl-3 { width:200px; background-color:aqua; flex-grow:3; flex-shrink:3; } 
14 #container2 { 

15 width:309px; height:109px; border:3px solid btuei 

16 display: flex; 

17 } 

18 #iten2-1 { width:299px; background-color:yellow; flex-grow:1; flex-shrink:1; } 
19 #1item2-2 { width:200px; background-color:pink; flex-grow:2; flex-shrink:2; } 
20 #item2-3 { width:208px; background-color:aqua; flex-grow:3; flex-shrink:3; } 
21 </style> 

22 </head> 

23 <body> 


24 <div id="containerl"> 
25 <div id="itenl-1">flex iteml</div> 
26 <div id="iteml-2">tlex item2</div> 
27 <div id="itenl-3">flex item3</div> 
28 </div> 

29 <hr> 

38 <div id="container2"> 

31 <div id="iten2-1">flex iteml</div> 
32 <div id="item2-2">flex iten2</div> 
33 <div id="iten2-3">tlex item3</div> 
34 </div> 

35 </body> 

36 </html> 


从 上 述 程序 第 11、12、13 和 18、19、20 行 ， 可 以 看 到 同时 有 flow-grow 和 flow-shrink 属性 ， 
表示 如 果 留 白 时 或 出 血 时 ， 皆 已 经 设 定好 放大 或 缩小 比例 了 。 


| 20-9 | 调整 前 的 区 块 对 象 宽度 (flex-basis ) 


在 程序 实例 ch20_12.html 或 ch20_11.html 中 ， 调 整 区 块 大 小 前 笔者 仍 是 使 用 width 来 设 定 调整 
前 的 宽度 ， 其 实 W3C 建议 使 用 flex-basis 来 设 定 调整 前 的 宽度 。flex-basis 的 使 用 格式 如 下 : 


flex-basis: number | auto | initial | inherit; 


口 number : 按 长 度 设 定 宽度 ， 长 度 单位 可 参考 附录 D。 
口 auto : 默认 值 ， 即 依据 内 容 设 定 宽度 。 
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程序 实例 ch20_13.html : 使 用 flex-basic 取代 width， 重 新 设计 ch12 12html。 下 列 是 样式 表单 部 分 。 


6 <style> 

7 #containerl { 

8 width:600px; height:109px; border:3px solid blue; 

9 display:flex; 

10 } 

11 #iteml-1 { flex-basis:200px; background-color:yellow; flex-grow:1; flex-shrink:1; } 
12 #iteml-2 { fLex-basis;200px; background-color:pink; flex-grow:2; flex-shrink:2; } 
13 #item1l-3 { flex-basis:200px; background-color:aqua; flex-grow:3; flex-shrink:3; } 
14 #container2 { 

15 width:300px; height:100px; border:3px solid blue; 

16 display:flex; 

17 } 

18 #item2-1 { flex-basis:200px; background-color:yellow; flex-grow:1; flex-shrink:1; } 
19 #item2-2 { flex-basis:200px; background-color:pink; flex-grow:2; flex-shrink:2; } 
20 #item2-3 { flex-basis:200px; background-color:aqua; flex-grow:3; flex-shrink:3; } 


21 </style> 


本 程序 执行 结果 与 ch20_12.html 相同 。 


20-10 增 减 区 块 宽度 的 简易 表示 法 (flex ) 


这 个 属性 是 flex-grow、flex-shrink、flex-basis 的 简易 表示 法 。 


flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; 
口 flex-grow flex-shrink flex-basis : 值 可 参考 20-7、20-8、20-9 节 。 
口 auto : 相当 于 flex-grow flex-shrink flex-basis 的 1 1 auto。 
程序 实例 ch20_14.html : 以 flex 属性 重新 设计 ch20_13.html。 


6 <style> 

7 #containerl { 

8 width:600px; height:100px; border:3px solid blue; 
9 display:flex; 

10 } 

11 #iteml-1 { flex:1 1 200px; background-color:yellow; } 
12 #iteml-2 { flex:2 2 200px; background-color:pink; } 
13 #iteml-3 { flex:3 3 200px; background-color:aqua; } 
14 #container2 { 

15 width:300px; height:100px; border:3px solid blue; 
16 display:flex; 

17 芝 

18 #item2-1 { flex:1 1 200px; background-color:yellow; } 
19 #item2-2 { flex:2 2 200px; background-color:pink; } 
20 #item2-3 { flex:3 3 200px; background-color:aqua; } 


21 </style> 


本 程序 执行 结果 与 ch20_12.html 相同 。 
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20-11| 设 定 留 白 的 方式 (justify-content ) 


如 果 在 弹性 容器 内 发 生 留 白 时 ， 可 以 使 用 这 个 属性 设 定 留 白 的 方式 ， 它 的 使 用 格式 如 下 : 


justify-content: flex-start | flex-end | center | space-between | 


space-around | initial | inherit; 
口 flex-start 
默认 值 ， 即 版 面 区 块 对 象 在 前 面 ， 留 白 在 后 面 。 
口 _ flex-end 
设 定 版 面 区 块 对 象 在 后 面 ， 留 白 在 前 面 。 
OD center 


设 定 版 面 区 块 对 象 在 中 间 ， 留 白 在 两 边 。 
口 space-between 

设 定 第 一 个 版 面 区 块 对 象 放 在 弹性 容器 开始 端 ， 最 后 一 个 版 面 区 块 对 象 放 在 弹性 容器 末端 ， 剩 
下 的 版 面 区 块 平 均 分 配 留 白 。 
口 space-around 


设 定 留 白 平均 分 配 在 版 面 区 块 间 ， 但 是 开头 和 末端 的 留 白 是 其 他 的 一 半 。 
程序 实例 ch20_15.html : justify-content 属性 的 应 用 ， 属 性 值 是 flex-start， 与 上 例 的 不 同 之 处 如 下 。 


二 执行 结果 


3 <head> 


4 <meta charset="utf-8"> 

5 <title>ch20_15.html</title> 
6 <style> 

7 #container { 

8 


width:600px; height:100px; border:3px solid blue; 


9 display: flex; 
10 justify-content:flex-start; 

11 

12 #iteml { width:80px; background-color:yellow; } 

13 #item2 { width:100px; background-color:pink; } 

14 #item3 { width:50px; background~cotor:aqua; } 

15 #item4 { width:100px; background-color:lightgreen; } 
16 #item5 { width:60px; background-color:lightblue; } 
17 </style> 

18 </head> 

19 <body> 


20 <div id="container"> 

21 <div id="iteml">iteml</div> 
22 <div id="item2">item2</div> 
23 <div id="item3">item3</div> 
24 <div id="item4">item4</div> 
25 <div id="item5">item5</div> 
26 </div> 

27 </body> 

28 </html> 
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程序 实例 ch20_16.html : justify-content 属性 的 应 用 ， 属 性 值 是 Hex-end， 与 上 例 的 不 同 之 处 如 下 。 


10 justify-content:flex-end; 执行 结果 


| 面 


程序 实例 ch20_17.html : justify-content 属性 的 应 用 ， 属 性 值 是 center。 与 上 例 的 不 同 之 处 如 下 。 


10 justify-content:center; 执行 结果 


| 男 


程序 实例 ch20_18.html : justify-content 属性 的 应 用 ， 属 性 值 是 space-between， 与 上 例 的 不 同 之 处 
如 下 。 


10 justify-content:space-between; 执行 结果 


ln 


程序 实例 ch20_19.html : justify-content 属性 的 应 用 ， 属 性 值 是 space-around， 与 上 例 的 不 同 之 
处 如 下 。 


10 justify-content:space-around; 执行 结 


20-12 垂直 方向 留 白 的 处 理 ( align-items ) 


在 前 面 各 节 所 叙述 的 实例 中 ， 当 版 面 区 块 对 象 是 以 水 平方 向 排列 时 ， 所 有 对 象 的 高 度 皆 相同 ， 
实际 上 有 时 也 会 有 对 象 高 度 不 一 样 的 情况 。 此 外 ， 前 一 节 是 叙述 当 区 块 对 象 以 水 平方 向 排列 时 ， 水 
平方 向 的 留 白 处 理 ， 这 一 节 将 讲解 当 区 块 对 象 以 水 平方 向 排列 时 ， 垂 直方 向 的 留 白 处 理 ， 可 参考 
下 图 。 


弹性 区 块 容器 (flex container) 


弹性 对 象 fex tem 1 弹性 对 象 fexitem 2 -弹性 对 象 fexitemn 


留 白 区 域 


弹性 区 块 排版 方向 


HTML5+CSS3 王者 归来 


上 述 概念 也 可 以 应 用 在 当 区 块 对 象 以 垂直 方向 排版 时 ， 水 平方 向 的 留 白 处 理 ， 可 参考 下 图 。 


弹性 区 块 容器 (flex container) | 弹性 对 每 flexitem 1 
留 
人 用 弹性 区 块 排版 方向 
域 
i |! 


我 们 可 以 使 用 align-items 属性 进行 这 方面 的 设 定 。 
align-items: stretch | flex-start | flex-end | center | baseline | 
initial | inherit; 
口 stretch : 默认 值 ， 如 果 没有 设 定 height 或 width， 版 面 区 块 对 象 会 被 伸展 至 填 满 留 白 的 宽度 或 
高 度 ， 如 果 设 定 了 height 或 width， 则 依 设 定 ， 将 留 白 放 在 弹性 容器 未 端 。 
口 flex-start : 设 定 版 面 区 块 对象 集 中 在 弹性 容器 开始 端 ， 留 白 放 在 弹性 容器 末端 。 
口 flex-end : 设 定 版 面 区 块 对象 集 中 在 弹性 容器 未 端 ， 留 白 放 在 弹性 容器 开始 端 。 
口 ”center : 设 定 版 面 区 块 对 象 集中 在 弹性 容器 中 央 ， 留 白 放 在 弹性 容器 两 端 。 
口 ”baseline : 设 定 在 弹性 容器 内 用 一 个 基线 设 定 各 版 面 区 块 对 象 的 对 齐 方式 。 


程序 实例 ch20_20.html : 将 align-items 设 为 Hex-start 的 应 用 ， 请 读者 留意 第 10 行 的 设 定 。 


1 <!doctype html> Pe 
i 执行 结果 


4 <meta charset="utf-8"> 

5 <title>ch20_20.html</title> 
6 <style> 
7 
8 


#container { 
width:600px; height:250px; border:3px solid blue; 

9 display:flex; 
19 aign-items:ftex-start; 
11 } 
12 #iteml { width:100px; height:159px; background-color:yellow; } 
13 #item2 { width:150px; height:199px; background-color:pink; } 
14 #item3 { width:50px; height:200px; background-color:aqua; } 
15 #item4 { width:100px; height:100px; background-color:lightgreen; } 
16 #item5 { width:200px; height:150px; background-color: lightblue; } 
17 </style> 
18 </head> 
19 <body> 


20 <div id="container"> 

21 <div id="iteml">iteml</div> 
22 <div id="item2">item2</div> 
23 <div id="item3">item3</div> 
24 <div id="item4">item4</div> 
25 <div id="item5">item5</div> 
26 </div> 

27 </body> 

28 </html> 


第 20 章 ”使 用 弹性 容器 ( flexible container ) 排版 


程序 实例 ch20_21.html : 将 align-items 设 为 flex-end 的 应 用 ， 请 读者 留意 第 10 行 的 设 定 ， 内 
容 如 下 。 


19 align-items:flex-end; 执行 结果 


程序 实例 ch20_22.html : 将 align-items 设 为 center 的 应 用 ， 请 读者 留意 第 10 行 的 设 定 ， 内 容 
如 下 。 


-i 


20-13 个 别 版 面 区 块 留 白 的 处 理 (align-self) 


align-self 属性 用 于 个 别 版 面 区 块 留 白 的 处 理 。 当 个 别 版 面 区 块 设 有 align-self 属性 时 ， 这 个 属性 
会 覆盖 弹性 容器 align-items 属性 的 设 定 。 
程序 实例 ch20_23.html : 重新 设计 ch20_21.html， 这 个 程序 的 第 1 和 第 5 个 版 面 区 块 的 align-self 
属性 值 是 center。 第 3 个 版 面 区 块 的 align-self 属性 值 是 flex-start。 下 列 是 样式 表单 的 内 容 。 


6 <style> 
7 #container { 

8 width:600px; height:250px; border:3px solid blue; 

9 display: flex; 

10 align-items:flex-end; 

1 } 

12 #iteml { width:190px; height:150px; background-color:yellow; atign-setf:center; } 
13 #item2 { width:150px; height:199px; background-color:pink; } 

14 #item3 { width:50px; height:200px; background-color:aqua; align-self:flex-start;} 
15 #item4 { width:190px; height:190px; background-color: lightgreen; } 

16 #item5 { width:290px; height:150px; background-color:\ightblue; align-self:center; } 


17 </styte> 


bs 


HTML5+CSS3 王者 归来 


align-content 的 使 用 格式 如 下 : 


align-content: stretch | fex-start | flex-end | center | space-between | space- 


around | initial | inherit; 


口 


stretch : 默认 值 ， 即 如 果 没 有 设 定 height 或 width ， 留 白 会 被 平均 分 配 ， 如 果 设 定 了 height 
或 width， 则 依 设 定 ， 留 白 放 在 弹性 容器 未 端 。 

flex-start : 设 定 版 面 区 块 对 象 在 前 面 ， 留 白 在 后 面 。 

flex-end : 设 定 版 面 区 块 对 象 在 后 面 ， 留 白 在 前 面 。 

center : 设 定 版 面 区 块 对 象 在 中 间 ， 留 白 在 两 边 。 

space-between : 设 定 第 一 个 版 面 区 块 对 象 放 在 弹性 容器 开始 端 ， 最 后 一 个 版 面 区 块 对 象 放 
在 弹性 容器 末端 ， 剩 下 的 版 面 区 块 对 象 平均 分 配 留 白 。 

口 space-around : 设 定 留 白 在 版 面 区 块 间 平均 分 配 ， 但 是 开头 和 末端 的 留 白 是 其 他 的 一 半 。 


程序 实例 ch20_24.html : 弹性 容器 有 多 行 版 面 区 块 时 ，align-content 是 flex-start 的 应 用 。 读 者 须 留 


和 


意 第 12 行 的 程序 代码 。 
<! html> /二 
a 全 执行 结果 
3 <head> 


4 ‘<meta charset="utf-8"> 

5 <title>ch20_24.html</title> 

6 <style> 

2 #container { 

8 width:500px; height:300px; border:3px solid blue; 


9 display:flex; 

10 flex-direction: row; 

11 flex-wrap:wrap; 

12 align-content:flex-start; 

13 } 

14 #iteml { height:100px; width:200px; background-color:yellow; } 
15 #item2 { height:100px; width:208px; background-color:pink; } 

16 #item3 { height:100px; width:100px; background-color:aqua; } 

17 #item4 { height:100px; width:350px; background-color:lightgreen; } 
18 #item5 { height:100px; width:159px; background-color:lightblue; } 
19 </style> 

20 </head> 

21 <body> 


22 <div id="container"> 

23 <div id="item1">flex iteml</div> 
24 <div id="item2">flex item2</div> 
25 <div id="item3">flex item3</div> 
26 <div id="item4">flex item4</div> 
27 <div id="item5">flex item5</div> 
28 </div> 

29 </body> 

30 </html> 


第 20 章 使 用 弹性 容器 (flexible container ) 排版 


程序 实例 ch20_25.html : 重新 设计 ch20 24.html，align-content 是 flex-end 的 应 用 。 
12 align-content:flex-end; 


程序 实例 ch20_26.html : 重新 设计 ch20_24.html，align-content 是 center 的 应 用 。 


12 align-content:center; 


程序 实例 ch20_27.html : 重新 设计 ch20_24.html，align-content 是 space-between 的 应 用 。 


12 align-content:space-between; 


程序 实例 ch20_28.html : 重新 设计 ch20_24.html，align-content 是 space-around 的 应 用 。 


12 align-content:space-around; 


ll 


HTML5+CSS3 王者 归来 


20-15 综合 应 用 


在 结束 本 章 前 ， 笔 者 将 举 一 个 网 页 布局 的 实例 ， 应 用 所 学 的 弹性 容器 排版 方法 。 
程序 实例 ch20_29.html : 使 用 本 章 概念 重新 设计 ch19_12.html， 这 个 程序 的 特点 在 于 排版 区 块 对 象 


的 高 度 是 直接 设 定 的 。 


1 <!doctype html> 
2 <html> 
3 <head> 
4 ‘<meta charset="utf-8"> 
5 <title>ch29_29.html</title> 
6 <style> 
7 hl { text-align:center; } 
#container { width:100%; height:680px; display:flex; flex-direction:row; 
9 flex-wrap:wrap; } 


10 header { width:100%; height:90px; background-color:lightyellow; } 
11 nav { width:100%; height:90px; background-color:aqua; } 

12 articte { width:70%; height;330px; background-color:greenyellow; } 
13 aside { width:30%; height:330px; background-color:pink; } 

14 footer { width:100%; height:90px; background-color:yellow; } 

15 </style> 

16 </head> 

17 <body> 


18 <div id="container"> 

19 <header><hl>header</hl></header> 

20 <nav><hl>nav</hl></nav> 

21 <article><hl>article</hl></article> 
22 <aside><hl>aside</hl></aside> 

23 <footer><hl>footer</hl></footer> 

24 </div> 

25 </body> 

26 </html> 


习题 

1. 请 使 用 本 章 的 概念 重新 设计 ch10_17.html。 

2. 请 使 用 本 章 概念 ， 为 自己 班级 设计 网 页 ， 内 容 可 以 自行 发 挥 。 
3. 请 设计 以 某 景点 为 主题 的 网 页 ， 内 容 可 以 自行 发 挥 。 


泪 
[wS) 
地 


21-1 设 定 过 渡 效 果 时 间 的 属性 transition-duration 
21-2 设 定 过 渡 效 果 的 属性 transition-property 

21-3” 设 定 过 渡 延 迟 时 间 的 属性 transition-delay 

21-4 ”设计 过 渡 速度 的 属性 transition-timing-function 
21-5 ”过渡 效果 的 简易 表示 法 transition 

21-6 ”综合 应 用 


这 一 章 重点 介绍 基本 的 动画 过 渡 效 果 。 过 去 制作 动画 需要 使 用 Flash 或 借用 Javascript， 
本 章 介绍 的 动画 效果 可 以 使 用 下 列 方式 完成 。 

( 1 ) 设 定 动画 前 的 属性 值 。 

〈2 ) 设 定 动画 时 间 ， 也 就 是 过 渡 效 果 时 间 。 

( 3 ) 设 定 动画 后 的 属性 值 。 

触发 动画 的 机 制 ， 通 常 是 在 鼠标 指针 移 至 特定 元 素 时 执行 。 


HTML5+CSS3 王者 归来 


设 定 过 湾 效果 时 间 的 属性 transition-duration 


这 个 属性 的 使 用 格式 如 下 : 
transition-duration: time | initial | inherit; 
D time 
可 设 定 秒 〈s) 或 毫秒 (ms)。 如 果 有 多 个 属性 要 分 开 执 行 过 渡 效 果 ， 则 需 用 逗号 隔 开 。 


py 证 设 定 过 渡 效 果 的 属性 transition-property 


这 个 属性 可 设 定 过 渡 效 果 应 用 在 那些 属性 ， 它 的 使 用 格式 如 下 : 


transition-property: none | all | property | initial | inherit; 


DO none 

没有 属性 会 产生 过 渡 效 果 。 
口 all 

设 定 有 过 渡 效 果 ， 且 所 有 属性 都 会 有 过 渡 效 果 。 
OD property 


设 定 有 过 渡 效 果 的 属性 名 称 ， 如 果 有 多 个 属性 ， 属 性 间 需 加 上 逗号 。 
程序 实例 ch21_1.html : 程序 执行 时 标题 的 背景 色 是 黄色 ， 当 将 鼠标 指针 移 至 标题 区 ， 标 题 的 背景 
色 将 有 过 渡 效 果 ，3 秒 〈 程 序 第 11 行 设 定 ) 后 将 变 成 绿色 。 


1 <!doctype html> 执行 结果 
2 <html> 


3 <head> 


4 <meta charset="utf-8"> HIMLS+CSS3 | HIMLS+CSS3, | | 
5 <title>ch21_1.html</title> | 
6 <style> 

7 hit 

8 text-align:center; 

9 background-color:yellow; 

10 transition-property:background-color; 

11 transition-duration:3s; 

12 } 

13 hi:hover { background-color:green; } 

14 </style> 

15 </head> 

16 <body> 

17 <hl>HTMLS5 + CSS3</hi> 

18 </body> 

19 </html> 


程序 实例 ch21_2.html : 同时 设 定 多 个 属性 的 过 渡 效 果 ， 当 将 鼠标 指针 移 至 标题 区 时 ， 标 题 的 背景 
色 黄色 变 绿色 )、 标 题 颜 色 (黑色 变 蓝 色 ) 以 及 标题 元 素 的 背景 高 度 (100px 变 300px) 将 有 过 渡 
效果 ，3 秒 〈 程 序 第 11 行 设 定 ) 后 将 变 成 绿色 。 


e html> 


1 
2 <hti 
3 <head> 

4 <meta charset="utf-8"> 
5 

6 

7 

8 


<title>ch21_2.html</title> 


<style> 
nt 
height:190px; 
9 text-align: center; 
19 background-color:yellow; 
11 transition-property:cotor，background-cotor，height; 
12 transition-duration:3s; 
13 } 
14 hl:hover { color:blue; background-color:green; height:300px; } 
15 </style> 
16 </head> 
17 <body> 
18 <hl>HTML 5 + CS53</hl> 
19 </body> 
20 </html> 


ps 并 设 定 过 渡 延 迟 时 间 的 属性 transition-delay 


这 个 属性 的 使 用 格式 如 下 : 


transition-delay: time | initial | inherit; 
口 time : 设 定 秒 (s) 或 毫秒 (ms)， 执 行 过 渡 效 果 时 ， 指 定 延 迟 时 间 。 
程序 实例 ch21_3.html : 重新 设计 ch21_2.html， 与 该 程序 不 同 之 处 在 于 增加 延迟 时 间 2 秒 ， 同 时 标 
题 宽度 由 150px 变 成 300px。 


1 <!doctype htmt 
2 <html> 

3 <head> 

4 eneta charset="utf-8"> 

5 <title>ch21 3,htnl</title> 

6 -<style> 

7 mt 

a height:100px; width:159px; 

9 text-align: center; 

19 background-color:yellow; 

11 transition-property:color, background-color, height, width; 

12 transition-duration:3s; 

3 transition-delay:2s; 

14 } 

15 hlihover { color:blue; background-color:green; height:390px; width:399px;} 
16 </style> 

17 </head> 

18 <body> 


19 <hl>HTML 5 + CS53</h1> 
29 </body> 
21 </htmt> 


设计 过 渡 速 度 的 属性 transition-timing-function 


这 个 属性 的 使 用 格式 如 下 : 


transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step- 


start | step-end | steps (int, start 1 end) 1 cubic-bezier (xl1,yl,x2,y2) | initial | inherit; 


口 ease : 默认 值 ， 即 开始 是 慢 ， 中 途 加 速 、 中 途 减 速 、 结 束 再 慢 ， 相 当 于 cubic-bezier 
CO25D.10251) 


HTML5+CSS3 王者 归来 


口 ease-in : 设 定 开始 是 慢 ， 然 后 加 速 ， 相 当 于 cubic-bezier ( 0.42,0,1,1 )， 这 是 贝 塞 尔 曲线 。 

口 ease-out : 设 定 开始 是 快 ， 结 束 是 慢 ， 相 当 于 cubic-bezier ( 0,0,0.58,1 )。 

口 ease-in-out : 设 定 开始 是 慢 ， 过 渡 加 速 ， 然 后 减速 至 结束 ， 相 当 于 cubic-bezier 

1042100.58 1)5 

linear : 设 定 用 相同 速度 ， 相 当 于 cubic-bezier ( 0,0,1,1 )。 

step-start : 与 设 定 steps ( 1,start ) 效果 相同 。 

step-end : 与 设 定 steps ( 1,end ) 效果 相同 。 

steps ( int,start | end ) : 第 一 个 参数 是 次 数 ， 设 定 过 渡 的 量 次 ， 执 行 平 均 分 割 ， 第 二 个 参数 是 触 

发 的 时 机 ，start 代表 在 开始 点 触发 ，end 代表 在 终点 触发 。 如 果 省 略 第 二 个 参数 ， 代 表 是 end。 

口 “cubic-bezier ( x1,y1,x2,y2 ) : 用 贝 塞 尔 函 数 ( 代表 0~1 之 间 变 化 的 数值 ) 设 定 过渡 效 果 ， 其 
中 X 轴 是 变化 所 需 时 间 ，y 轴 是 变化 的 比例 。 这 个 值 主要 用 在 设 定 更 细 数 的 变化 的 场合 。 

程序 实例 ch21_4.html : 过 渡 速 度 的 应 用 。 为 了 让 读者 可 以 体会 ， 这 个 程序 的 第 13 行 ， 笔 者 设 定 

过 渡 效 果 时 间 是 10 秒 。 程 序 的 第 14 行将 过 渡 速 度 设计 为 ease， 另 外 ， 除 了 宽度 和 高 度 的 变化 外 ， 

还 增加 了 标题 文字 透明 度 opacity 从 0.1 至 1 的 变化 过 程 。 


1 <!doctype html> 执行 结果 


2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


加 .加 ', 国 / 局 


5 <title>ch21_4.html</title> 
6 <style> 
7 
8 


hit 
height:100px; width:250px; background-color: lightgreen; 

9 text-align:center; 
10 color:green; 
2 ‘opacity:0.1; 
12 transition-property:opacity, height, width; 
13 transition-duration:10s; 
14 transition-timing-function:ease; 
15 } 
16 hi:hover { opacity:1.0; height:300px; width:300px;} 
17 </style> 
18 </head> 
19 <body> 
20 <hl>HTML 5 + CSS3</hi> 
21 </body> 
22 </html> 


程序 实例 ch21_5.html : 重新 设计 ch21_4.html， 程 序 第 14 行将 过 渡 速 度 设计 为 steps (10)， 表 示 
分 10 次 执行 渐变 ， 相 当 于 每 秒 一 次 。 


14 transition-timing-function:steps(10); 


结果 与 ch21_4.html 相同 ， 请 读者 留意 观察 过 渡 过 程 。 


过 渡 效果 的 简易 表示 法 transition 


transition 是 以 上 几 节 过 渡 效 果 设 定 属性 的 简易 表示 法 。 


transition: property duration timing-function delay | initial | inherit; 


第 21 章 动画 设计 一 一 过 渡 效 果 


这 个 简易 表示 法 中 ， 值 的 顺序 不 拘 ， 只 要 之 间 空 一 格 即 可 。 
程序 实例 ch21_6.html : 以 transition 重新 设计 ch21 4.html， 读 者 应 仔细 研究 第 12 行 的 transition 


简易 表示 法 。 
1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch21_6.html</title> 
6 <style> 
学 ht 
8 


height:100px; width:250px background-color:lightgreen; 
9 text-align:center; 
10 color:green; 
11 ‘opacity:0.1; 
12 transition:opacity, height, width, 10s ease; 
13 } 
14 hi:hover { opacity:1.0; height:300px; width:398px;} 
15 </style> 
16 </head> 
17 <body> 
18 <hl>HTML 5 + CSS3</hl> 
19 </body> 
20 </html> 


结果 与 ch21_4.html 相同 。 


| 21-6 | 综合 应 用 


至 今 所 有 过 渡 效 果 的 触发 机 制 皆 是 鼠标 指针 移 至 元 素 上 ， 本 节 将 举 一 个 实例 ， 当 元 素 获得 焦点 


时 即 予 触 发 。 
程序 实例 ch21_7.html : 当 元 素 获得 焦点 时 ， 将 输入 文字 框 的 宽度 由 100px 增加 到 200px， 同 时 底 


色 改 为 黄色 。 


1 <!doctype htmt> 
2 <html> 
<head> 

<meta charset="utf-8"> 


3 

4 

5 <title>ch21_7.html</title> 

6 <style> /二 

7 input [type=text] { 执行 结果 
8 width:100px; 

9 transition:width, background-color, 1s ease-in-out; 

19 } Input data: 
11 input [type=text]:focus { width:290px; background-color:yellow; } 
12 </style> 

13 </head> 

14 <body> 

15 <p>Input data:<input type="text" name="input-data"></p> Input data: TO 
16 </body> 

17 </html> 号 


习题 
1. 请 重新 设计 第 19 章 习 题 4 的 家 庭 网 页 ， 增 加 过 渡 效 果 ， 内 容 可 自由 发 挥 创 意 。 
2. 请 以 所 学 的 网 页 知识 ， 为 此 门 课程 的 老师 设计 网 页 ， 内 容 可 自由 发 挥 创 意 。 


本 章 摘要 


22=1 
22=2 
22=3 
22-4 
22=5 
22=6 
22=7 
22=8 
22=9 


关键 帧 ( @keyframes ) 

运用 关键 帧 (animation-name ) 

设 定 动画 时 间 ( animation-duration ) 

设计 动画 变速 方式 (animation-timing-function ) 
设 定 动画 次 数 ( animation-iteration-count ) 

设 定 动画 重复 执行 的 方向 ( animation-direction ) 
设 定 动画 执行 或 是 暂停 ( animation-play-state ) 
设 定 动画 延迟 的 时 间 ( animation-delay ) 

设 定 动画 延迟 与 完成 的 样式 ( animation-fill-mode ) 


22-10 动画 的 简易 表示 法 animation 


前 一 章 所 介绍 的 渐变 效果 只 能 设 定 开始 与 结束 的 样式 ， 其 实 距离 真正 的 动画 还 差 一 点 。 这 一 
章 则 是 将 动画 分 成 许多 关键 点 ， 也 可 称 关键 帧 ( key frame )， 然 后 我 们 可 以 设 定 每 一 个 关键 帧 
的 内 容 ， 再 播放 ， 就 可 以 实现 动画 的 效果 。 
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1 22=1 关键 由 (@keyframes ) 


关键 帧 的 使 用 格式 如 下 : 


@keyframes name { 


os { 属性 : ; ~} 


100% { 属性 : ;~ } 
于 


口 _name : 关键 帧 的 名 称 ， 这 个 名 称 将 以 animation-name 属性 设 定 使 用 ， 下 一 节 会 说 明 。 

口 ”百分比 % : 动画 时 间 的 几 个 关键 点 用 时 间 的 百分比 做 标记 ， 开 始点 关键 帧 是 0% ， 结 束 点 关键 
帧 是 100%， 这 两 帧 不 可 省 略 ， 至 于 动画 的 过 程 ， 则 用 不 同 的 百分比 标记 。 在 每 一 个 关键 帧 
中 ， 我 们 可 以 设计 属性 与 相对 应 的 属性 值 。 程 序 设计 时 ，0% 也 可 以 用 “from” 取 代 ，100% 
可 以 用 “to” 取 代 。 


运用 关键 帧 (animation-name ) 


这 个 属性 的 使 用 格式 如 下 : 


animation-name: none | name; 


口 ”none : 没有 动画 。 
口 _name : 使 用 的 动画 名 称 。 
下 面 是 将 动画 名 称 设 为 myanimation 以 及 引用 的 示例 。 


@keyframes myanimation { 


os { 属性 : ; ~】 


100% { 属性 : ;~ } 


animaiton-name:myanimation; 


设 定 动画 时 间 ( animation-duration ) 


掌握 了 前 两 节 的 知识 后 ， 接 下 来 是 设 定 动画 时 间 。 设 定 动画 时 间 属 性 的 使 用 方式 如 下 : 
animation-duration: time | initial | inherit; 
口 time: 可 设 定 s ( 秒 ) 或 ms ( 毫秒 )。 如 果 有 多 个 属性 要 分 开 执行 渐变 效果 ， 则 需 用 逗号 隔 开 。 
程序 实例 ch22_1.html : 设计 标题 元 素 的 移动 ， 移 动 一 次 是 1s， 共 移动 5 次 ， 总 时 间 是 5s。 


HTML5+CSS3 王者 归来 


ee 下 图 所 示 为 移动 的 过 程 。 
3 <head> 


4 <meta charset="utf-8"> 

5 <title>ch22 1.html</title> 
6 <style> 

~ 

8 


@keyframes my-animation { 
0Q% { left:Qpx; top:@px; } 


9 20% { left:50px; top:50px; } 

10 40% { left:100px; top:199pxy } 

11 60% { left:150px; top:150px; } 

12 B80% { left:200px; top:200px; } 

13 100% { left:250px; top:259px;y } 

14 沁 

路 hit 

16 width:250px; 

17 height:190px; 

18 color:blue; 

19 background-color:yellow; 

20 position:absolute; 

21 animation-name:my~animation; 

22 animation-duration:5s; 

23 》 

24 </style> 

25 </head> 

26 <body> 

27 <hl>HTML 5+CSS3</h1l> 

28 </body> 

29 </html> 
程序 实例 ch22_2.html : 图 片 移动 的 应 用 。 这 个 程序 会 将 图 片 以 上 、 右 、 下 、 左 方向 移动 ， 最 后 
回 到 原点 。 

1 > a 

Ee 下 图 所 示 为 移动 过 程 。 
3 <head> 


4 <meta charset="utf-8"> 


5 <titleych22 2.html¢/title> 

6 <style> 

7 Qkeyframes my-animation { 

a Q% { left:epx; top:epx; } 

9 25% { left:200px; top:epx; } 
19 56@% { left:209px; top;200px; } 
11 75% { left:opx; top:200px; } 
12 100% { left:0px; top:epx; } 
13 } 

14 body { margin:86px; } /= 设 定 body 版 面 与 浏览 器 版 画 左 端 切 齐 */ 
15 div { 

16 width;250px; 

17 height:108px; 

18 position:absolute; 

19 anination-name: my-animation; 
2 animation-duration:5s; 

21 } 

22 c/style> 

23 </head> 

24 <body> 

25 <div>¢img src="sselogo,jpg">¢/div> 
26 </body> 

27 </html> 


设计 动画 变速 方式 (animation-timing-function ) 


有 关 动 画 变速 的 方式 与 21-4 节 的 使 用 格式 相同 ， 细 节 可 参考 该 节 。 


animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear 


| step-start | step-end | steps (int,start 1 end)| cubic-bezier (x1,yl,x2,y2) 1 


initial | inherit; 
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这 个 属性 在 使 用 时 可 以 针对 一 个 关键 帧 做 速 度 的 设 定 ， 也 可 以 针对 整个 动画 做 速度 设 定 。 
程序 实例 ch22_3.html : 测试 动画 变速 的 参数 值 ， 另 外 ， 这 个 程序 第 16 行 ，position 使 用 相对 位 置 
relative 属性 值 。 
al 下 图 所 示 为 移动 过 程 。 


4 
5 <title>ch22_3.html</title> animation-timing-function 
6 <style> 
7 
8 


@keyfranes my-animation { 
0% { left:0px; } 


9 190% { left:350px; } 
19 } 

11 div { 

12 width:200px; 

3 height:60px; 

14 color:blue; 

15 background-color:yellow; 

16 position: relative; 

17 anination-nane: my-animation; 

; animation-duration:5s; animation-timing-function 
20 #routel { animation-timing-function:ease; } 

21 #route2 { animation-tining-function:ease-in; } 

22 #route3 { animation-timing-function:ease-out; } 

23 #route4 { animation-tining-function:ease-in-out; } 
24 #route5 { animation-timing-function: linear; } 

25 </style> 

26 </head> 

27 <body> 


28 <hl>animation-tining-function</h> 
29 <div id="routel">ease</div> 

30 <div id="route2">ease-in</div> 

31 <div id="route3">ease-out</div> 
32 <div id="route4">ease-in-out</div> 
33 <div id="routes">linear</div> 

34 </body> 

35 </html> 


程序 实例 ch22_4.html : 在 关键 帧 的 百分比 中 ， 将 0% 用 “from” 取 代 ，100% 用 “to” 取 代 。 下 列 
是 取代 方式 : 
7 @keyframes my~animation { 与 ch22 3 | 相同 。 


8 from { left:0px; } 
9 to { left:350px; } 
10 } 


区 再 汪 设 定 动画 次 数 (animation-iteration-count ) 


过 渡 效 果 无 法 重复 执行 ， 本 章 所 述 的 动画 却 是 可 以 重复 执行 的 。 


animation-iteration-count: number | infinite | initial | inherit; 
口 _number : 默认 值 是 1， 也 可 以 在 此 设 定 动画 次 数 。 
Dinifinite : 设 定 不 限 次 数 执行 。 
程序 实例 ch22_5.html : 以 不 限 次 数 方式 ， 重 新 设计 ch22_4.html。 相 较 于 该 程序 ， 本 程序 只 是 多 了 
第 19 行 ， 设 定 不 限 次 数 执行 。 
了 ee 与 ch22 4.html 相同 。 


13 height:60px; 
14 color:blue; 

15 background-color:yellow; 

16 position: relative; 

17 animation-name:my-animation; 

18 animation-duration:5s; 

19 animation-iteration-count:infinite; 
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py 着 设 定 动画 重复 执行 的 方向 (animation-direction ) 


当 动 画 重 复 执行 时 ， 可 以 利用 这 个 属性 设 定 动画 重复 执行 的 方向 。 


animation-direction: normal | reverse | alternate | alternate-reverse | 
initial | inherit; 
DD normal 
默认 值 ， 即 使 用 相同 方向 。 
口 reverse 
设 定 使 用 相反 方向 。 
OD alternate 


设 定 奇数 使 用 正方 向 ， 偶 数 使 用 反方 向 。 
口 alternate-reverse 

与 alternate 相反 ， 设 定 奇数 使 用 反方 向 ， 偶 数 使 用 正方 向 。 
程序 实例 ch22_6.html : 重新 设计 ch22 2.html， 这 个 程序 第 17 行使 用 了 相对 位 置 ， 第 20 行 设 定 不 
限 次 数 重复 执行 ， 第 21 行 设 定 奇数 使 用 正方 向 〈 顺 时 针 )， 偶 数 使 用 反方 向 〈 逆 时 针 )。 


2 人 和 :ERE 二 汪 请 读者 注意 观察 图 片 的 移动 方向 。 
3 <head> 

4 <meta charset="utf-8"> 外 

5 <title>ch22_6.html</title> nN 

6 <style> 

7 @keyframes my-animation { 4 

8 Q% { left:0px; top:Bpx; } 

9 25% { left:200px; top:0px; } 

10 50% { left:200px; top:200px; } 

11 75% { left:@px; top:200px; } 

12 100% { left:0px; top:Qpx; } 

13 } 

14 div { 

15 Width:250px; 

16 height:100px; 

17 position: relative; 

18 animation-name:my~animation; ey 
19 animation-duration:5s; APAR 
20 animation-iteration-count:infinite; 

21 animation-direction:alternate; A 
22 } Cg 
23 </style> 

24 </head> 

25 <body> 

26 <div><img src="sselogo.ipg"></div> 

27 </body> 

28 </html> 


程序 实例 ch22_7.html : 这 是 一 个 方块 盒子 的 动画 ， 奇 数 时 以 顺 时 针 方向 绕 方形 移动 ， 偶 数 时 以 逆 
时 针 方 向 绕 方形 移动 ， 而 且 每 一 个 动画 帧 的 方块 盒子 文字 颜色 与 背景 色 皆 不 同 。 


1 <ldoctype htmt> 


4 ‘<meta charset="utf-8"> 

5 <title>ch22_7.htal</title> 

6 -<style> 

7 @keyfranes my-animation { 

8 0% { color:blue; background-color:\ightblue; left:Bpx; top:Qpx; } 


9 25% { color:green; background-color: lightgreen; left:200px; top:Bpx; } 
10 Se% { color:red; background-color: lightred; left:280px; top:200px; } 
11 75% { color:violet; background-cotorstightyettow; left:9px; top:200px; } 
12 190% { color:blue; background-color: lightblue; teft:gpx; top:gpx; } 
13 

14 

15 

16 height:150px; 

17 position: relative; 

18 anination-name: my-anination; 

19 animation-duration:5s; 

20 anination-iteration-count: infinite; 

21 animation-direction:alternate; 

2 } 

23 -</style> 

24 </head> 

25 <body> 

26 <div>silicon Stone</div> 

27 </body> 

28 </htmt> 


这 个 属性 可 设 定 动画 的 执行 或 是 暂停 。 

animation-play-state: 
口 running : 默认 值 ， 动 画 是 执行 状态 。 
口 “paused : 设 定 动画 暂停 。 


running | paused | 


设 定 动画 执行 或 是 暂停 ( animation-play-state ) 


initial | 


第 22 章 设计 网 页 动画 


inherit; 


程序 实例 ch22_8.html : 重新 设计 ch22_7.html， 当 鼠标 指针 在 方块 盒子 处 时 ,动画 暂停 ， 当 鼠标 指 


针 离开 方块 盒子 时 ， 动 画 继 续 执 行 。 


1 <!doctype htmt> 


2 <html> 

3 <head> 

4 eeta charset="utf-8"> 

5 <title>ch22 8.htnl</title> 

6 «<style> 

7 @keyframes my-animation { 

8 QO% { color:blue; background-cotor:tightbtuei Left:9pxi top:Bpx; } 

9 25% { color:green; background-color: lightgreen; left:200px; top:9px; } 
10 Se% { color:red; background-color: lightred; Left:299px; top:290px; } 
1 75% { color:violet; background-color:\ightyellow; left:9px; top:200px; } 
2 100% { color:blue; background-color: lightblue; left:0px; top:Opx; } 
13 } 

14 div{ 

15 width:150px; 

16 height:150px; 

17 position: relative; 

18 animation-name: my-animation; 

19 animation-duration:5s; 

29 animation-iteration-count:infinite; 

21 animation-direction:alternate; 

2 animaiton-play-state: running; 

23 条 

24 div:hover { animation-play-state:paused; } 

25 </style> 

26 </head> 

27 <body> 

28 <div>Silicon Stone</div> 

29 </body> 


38 </htmt> 


下 图 所 示 为 鼠标 指针 位 
于 方块 盒子 处 ， 动 画 暂 停 的 画面 。 
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设 定 动画 延迟 的 时 间 ( animation-delay ) 


这 个 属性 的 使 用 格式 如 下 : 
animation-delay: time | initial | inherit; 
D time 
设 定 s〈 秒 ) 或 ms《〈 毫 秒 )， 即 执行 动画 效果 时 延迟 的 时 间 。 
程序 实例 ch22_9.html : 重新 设计 ch22_1.html， 增 加 了 第 23 行 ， 动 画 开始 时 先 延迟 3s。 


15 hl 7 二 | 
16 i 执行 结果 与 ch22_1.html 相同 。 
17 height:109pxy 

18 color:blue; 

19 background-color:yellow; 

20 position:absolute; 

21 animation-name: my-animation; 

2 animation-duration:5s; 

23 animation-delay:3s; 


24 } 
pp 夺 * 居 设 定 动画 延迟 与 完成 的 样 忒 (animation- 仙 -mode ) 
这 个 属性 用 于 设 定 动画 在 延迟 时 的 样式 ， 也 就 是 animation-delay 启动 期 间 的 样式 ， 及 动画 完成 


时 的 样式 ， 也 就 是 animation-duration 完成 后 的 样式 。 


animation-fill-mode: none | forwards | backwards | both | initial | inherit; 


口 _none 
默认 值 ， 即 没有 任何 样式 。 
口 forwards 


设 定 动画 完成 后 ， 保 持 最 后 动画 关键 帧 的 样式 。 
DO backwards 

设 定 动画 在 延迟 时 ， 保 持 最 初 动画 关键 帧 的 样式 。 
DO both 

同时 遵照 forwards 和 backwards 规定 ， 动 画 在 延迟 时 ， 保 持 最 初 动画 关键 帧 样式 ， 动 画 完成 
后 ， 保 持 最 后 动画 关键 帧 样式 。 
程序 实例 ch22_10.html : 重新 设计 ch22_1.html， 动 画 完成 时 ， 动 画 将 不 移动 位 置 与 样式 。 这 个 程 
序 的 重点 是 第 23 行 ， 另 外， 在 第 13 行 笔者 重 设 了 背景 颜色 。 
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rt 下 方 上 图 是 程序 执行 时 的 初始 画 
4 “set carsetcruatf-ens 面 ， 下 图 是 执行 完成 后 的 画面 。 


<title>ch22_10.html</title> 


4 
5 

6 <style> 

7 @keyframes my-animation { 

8 号 《Left:9px; top:Opx; } 

9 20% { left:50px; top:50px; } 


19 40% { left:100px; top:180px; } 
1 60% { left:150px; top:150px; } 
12 30% { left:200px; top:299px; } 
3 180% { left:258px; top:258px; background-color:aqua; } 
14 } 

15 nt 

16 width:250px; 

17 height: 106px; 

18 color:blue; 

19 background-color: yellow; 

20 position:absolute; 

21 animation-name: my-animation; 
22 animation-duration:5s; 

23 animation-fill-mode: forwards; 
24 } 


25 </style> 


26 </head> 
27 <body> 
28 <hl>HTML 5+CSS3</h1> 


29 </body> 
38 </htmt> 


22-10 动画 的 简易 表示 法 animation 


本 节 介绍 22-2 节 至 22-9 节 所 述 属性 的 简易 表示 法 。 

animation: animation-name animation-duration animation-timing-function 
animation-iteration-count animaiton-direction animaiton-play-state animation-delay 
animaiton-fill-mode; 

以 上 属性 设 定时 顺序 可 以 不 同 ， 如 果 没 有 设 定 则 使 用 默认 值 ; 同时 设 定 animation-duration 和 
animation-delay 的 秒 数 时 ， 会 先 判 给 animaiton-duration， 再 判 给 animation-delay ; 如 果 只 设 定 一 个 秒 
数 ， 则 给 animation-duration。 使 用 时 各 属性 值 间 用 空格 隔 开 。 
程序 实例 ch22_11.html : 用 animation 属性 重新 设计 ch22_7.html。 这 个 程序 的 重点 是 ， 程 序 第 18 
行 取代 了 原先 的 第 18 行 至 21 行 。 


2 二 下 
站 a 执行 结果 与 ch22_7.html 相同 
16 height:150px; 
17 position: relative; 
18 animation:my-animation 5s infinite alternate; 
19 } 


习题 

1. 请 重新 设计 第 19 章 习 题 4 的 家 庭 网 页 ， 增 加 动画 效果 ， 内 容 可 自由 发 挥 创意 。 

2. 请 用 所 学 的 制作 网 页 知识 ， 为 本 课程 的 老师 设计 网 页 ， 内 容 可 自由 发 挥 创意 ， 当 然 将 本 章 所 介绍 
的 网 页 动画 应 用 在 此 网 页 ， 它 是 重点 。 

3. 为 班级 设计 网 页 ， 使 每 位 同学 的 信息 有 一 个 出 现在 网 页 上 的 路 径 。 

4. 请 参考 程序 实例 ch7_12.html， 但 是 将 球 的 上 下 跳动 改 成 自己 的 设计 。 
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23=1 
23=2 
23=3 
23-4 
23-5 
23=6 
23=7 
23=8 


2D 变形 效果 

2D 变形 的 基准 点 

3D 变形 效果 

3D 变形 的 基准 点 

设 定 透 视图 视点 距离 
透视 图 的 基准 点 

巢 状 元 素 产生 时 子 元 素 的 处 理 
是 否 显示 背面 内 容 


CSS3 提供 了 2D 变形 、3D 变形 、 透 视图 法 ， 本 章 将 一 一 解说 。 
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| 23-1 | 2D 变形 效果 


其 实 transform 属性 可 以 执行 2D 变形 ， 也 可 以 执行 3D 变形 ， 本 章 将 从 2D 变形 开始 讲解 ，23-3 


节 则 介绍 3D 变形 。 将 transform 属性 应 用 在 2D 变形 时 ， 使 用 格式 如 下 : 


口 


transform: none | transform-function | initial | inherit; 

none 代表 没有 变形 。2D 变形 效果 的 transform-function 值 又 可 分 成 下 列 几 种 : 

移动 : translate()、translateX()、translateY() 

缩放 : scale0、scaleXO、scaleYO 

旋转 : rotate() 

倾斜 : skew(0、skewX0O、skewYO 

矩阵 : matrix() 

下 面 是 以 上 各 函数 的 说 明 。 

translate (x,y) 

移动 函数 ， 可 设 定 x 轴 和 y 轴 的 移动 距离 。 如 果 只 有 一 个 数值 ， 表 示 y 轴 移 动 距离 是 0。 
translateX (x) 

移动 函数 ， 可 设 定 x 轴 的 移动 距离 。 

translateY (y) 

移动 函数 ， 可 设 定 y 轴 的 移动 距离 。 

scale (x,y) 

缩小 或 放大 函数 ， 原 始 对 象 的 尺寸 为 1， 可 设 定 x 轴 和 y 轴 的 缩放 倍数 。 如 果 只 有 一 个 数值 ， 


表示 x 轴 和 y 轴 的 缩放 倍数 相同 。 


口 


口 


scaleX (x) 

缩小 或 放大 函数 ， 原 始 对 象 的 尺寸 为 1， 可 设 定 x 轴 的 缩放 倍数 。 

scaleY (y) 

缩小 或 放大 函数 ， 原 始 对 象 的 尺寸 为 1， 可 设 定 y 轴 的 缩放 倍数 。 

rotate (angle ) 

对 象 旋转 函数 ， 如 果 是 正 值 表 示 顺 时 针 旋 转 ， 如 果 是 负 值 表示 逆 时 针 旋转 。 最 常用 的 角度 单位 


是 deg， 例 如 rotate (45deg)， 表 示 向 右 旋转 45”。 


口 


skew (xy) 

倾斜 函数 ， 定 义 x 轴 和 y 轴 倾 斜 角度 。 
skewX (x) 

x 轴 倾 斜 函数 ， 定 义 x 轴 倾斜 角度 。 
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口 skewY (x) 

y 轴 倾 斜 函数 ， 定 义 y 轴 倾斜 角度 。 
OD matrix (a,b,c,d,e,f) 

使 用 3X3 的 矩阵 来 变换 坐标 。 


国 上 述 变形 的 基准 点 是 对 象 中 心 (50%,50% )。 
程序 实例 ch23_1.html : 这 是 使 一 个 区 块 对 象 左右 移动 的 程序 ， 对 象 以 线性 方式 移动 。 须 留意 的 是 


对 象 的 位 移 量 均 是 相 较 于 原始 对 象 的 位 置 。 


1 <!doctype html> 
2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <title>ch23_1.html</title> 

6 <style> 

@keyframes my-~animation { 

8 Q% { transformm:transtate(gpx); } 


9 25% { transform:translate(100px); } 
19 Se% { transform:translate(200px); } 
11 75% { transform:translate(100px); } 
12 100% {transform:translate(Qpx); } 
13 1 

14 div { 

15 width:100px; height:100px; 

16 border:1px solid blue; 

17 left:50px; top:50px; 

18 color:blue; background-color:yellow; 
19 position: relative; 

20 animation:my-animation 5s infinite linear; 
21 } 

22 </style> 

23 </head> 

24 <body> 

25 <div>Silicon Stone</div> 

26 </body> 

27 </html> 


其 实 上 述 程序 在 进行 区 块 对 象 移动 时 ， 只 使 其 在 x 轴 移动 ， 所 以 也 可 以 将 translate( 函数 改 用 


translateX() 函数 。 


程序 实例 ch23_2.html : 以 translateX0 函数 取代 translate() 函数 ， 重 新 设计 ch23_1.html。 


7 keyframes my-animation { 

8 es { transformm:translateX(gpx); } 
9 25% { transform:translatex(100px); } 
19 50% { transform:translatex(200px); } 
11 75% { transform:translatex(100px); } 
12 100% {transform:translateX(@px); } 
3 } 


程序 实例 ch23_3.html : 这 个 程序 在 使 对 象 水 平移 动 时 ， 同 时 会 增加 对 象 的 高 度 ， 分 别 是 为 原来 对 


象 的 200% 和 300%。 


1 <!doctype html> 

2 <html> 

3 <head> 

<meta charset="utf-8"> 

<title>ch23_3.html</title> 

<style> 

@keyframes my-animation { 
Q% { transformm:translateX(px); } 
25% { transformitranstateX(199px) scale(1,2); } 
Se% { transformitranstateX(299px) scale(1,3); } 


4 
5 
6 
7 
8 
9 
0 
上 75% { transform:transtateX(190px) scale(1,2); } 


与 ch23_1.html 相同 。 


100% {transform:translatex(0px); } 
div{ 
width:199px; height:109px; 
border:1px solid blue; 
left:50px; top:150px; 
color:blue; background-color:yellow; 
position: relative; 
animation:my-animation 5s infinite \linear; 
} 
</style> 
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程序 实例 ch23_4.html : 一 个 使 矩形 方块 对 象 旋转 的 应 用 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
<title>ch23_4.html</title> 


5 
6 <style> 

本 @keyframes my-animation { 

8 上 { transformmsrotate(gdeg); } 

9 25% { transform:rotate(90deg); } 

19 SO% { transform:rotate(180deg); } 

11 75% { transform:rotate(270deg); } 

12 


100% {transform:rotate(360deg); } 


13 

14 

15 eopx; height:100px; 

16 border:1px solid blue; 

17 left:50px; top:50px; 

18 color:blue; background-color:yellow; 
19 position: relative; 

29 animation:my-animation 65 infinite linear; 
21 } 

22 </style> 

23 </head> 

24 <body> 

25 <div>Silicon Stone</div> 

26 </body> 

27 </html> 


程序 实例 ch23_5.html : 图 片 旋转 的 应 用 。 


1 <!doctype htmt> 
2 <htmt> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch23_5.htnl</title> 
6 <style> 
7 
8 
9 


@keyframes my-animation { 
Q% { transformm:rotate(0deg); 
25% { transform:rotate(90deg) 


10 S50% { transform:rotate(180deg); } 
11 75% { transform: rotate(270deg; 

12 180% {transform: rotate(360deg); } 
13 } 

14 img { 

15 width:100px; height:150px; 

16 object-fit:fill; 

17 border:1px sotid blue; 

18 left:59px; top:50px; 

19 position: relative; 

20 animation:my-animation 6s infinite linear; 
21 和 

22 </style> 

23 </head> 

24 <body> 

25 <img src="hung, jpg"> 

26 </body> 


27 </html> 
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程序 实例 ch23_6.html : 重新 设计 ch23_5.html， 使 图 片 左右 摆动 。 


学 @keyframes my-animation { 

8 @% { transformm: rotate(gdeg); } 
9 25% { transform:rotate(30deg); } 
19 So% { transform:rotate(gdeg); } 
11 75% { transform:rotate(-30deg); } 
12 100% {transform: rotate(gdeg); } 
13 } 


别 是 30” 和 -30”。 


6 <style> 

7 @keyframes my-animation { 

8 Q% { transformm:skewX(0deg); } 
9 25% { transform:skewX(30deg); } 
10 S50% { transform:skewX(9deg); } 
11 75% { transform:skewX(-30deg); } 
12 100% {transform:skewX(9deg); } 
13 } 


执行 结 


程序 实例 ch23_7.html : 重新 设计 ch23_6.html， 这 是 一 个 使 图 片 以 x 轴 倾 斜 的 应 用 ， 倾 斜 的 角度 分 


执行 结果 


有 过 


程序 实例 ch23_8.html : 重新 设计 ch23_6.html， 这 是 一 个 使 图 片 以 y 轴 倾 斜 的 应 用 ， 倾 斜 的 角度 分 


别 是 30” 和 -30”。 


7 @keyframes my-~animation { 

8 Q% { transformm:skewY(@deg); } 
9 25% { transform:skewY(36deg); } 
19 SO% { transform:skewY(gdeg); } 
11 75% { transform:skewY(-39deg); } 
12 100% {transform:skewY(@deg); } 
13 } 


执行 结果 


如 果 是 文本 块 对 象 ， 用 倾斜 y 轴 方 式 显示 会 男 有 特色 ， 可 参考 下 面 的 实例 。 


程序 实例 ch23_9.html : 以 y 轴 倾斜 对 象 的 应 用 。 


1 <!doctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch23_9.html</title> 
6 <style> 
7 
8 


hi{ 
width:300px; height:150px; 

9 background-color:yellow; color:blue; 
10 border:3px solid blue; 
11 } 
12 hi#ex { 
0 transform:skewY(10deg); 
14 了 
15 </style> 
16 </head> 


17 <body> 


18 <hl>Siticon Stone</h1> 


19 <hl id="ex">Siticon Stone</hl> 
29 </body> 
21 </html> 


执行 结果 


MSN 
| 
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可 下 2D 变形 的 基准 点 


2D 变形 是 以 对 象 元 素 的 中 心 (50%,50%) 为 基准 点 的 ， 但 是 可 以 使 用 本 节 所 述 属性 transform- 


origin 更 改 基 准点 。 

transform-origin: x-axis y-axis | initial | inherit7 
OD x-axis 

定义 基准 点 的 x 坐标 。 可 能 的 值 有 left、center、right、length 和 %。 
口 y-axis 


定义 基准 点 的 y 坐 标 ， 可 能 的 值 有 top、center、bottom、length 和 %。 
程序 实例 ch23_10.html : 重新 设计 ch23_6.html， 将 旋转 基准 点 设 在 对 象 上 方 中 点 。 这 个 程序 在 第 
18 行 调整 了 图 片 位 置 ， 在 第 21 行 设 定 了 旋转 基准 点 。 


14 img { 行 疆 
15 width:166px;j height:156px3 执行 结 


16 object-fit:fill; 


17 border:1px solid blue; 

18 left:150px; top:58px; 

19 position:relative; 

26 animation:my-animation 6s infinite linear; 

21 transform-origin:5e% top; /* 旋转 点 在 上 方 中 央 */ 
22 } 


程序 实例 ch23_11.html : 重新 设计 ch23_5.html， 将 旋转 基准 点 设 在 对 象 左上 角 。 这 个 程序 在 第 18 
行 调整 了 图 片 位 置 ， 在 第 21 行 设 定 了 旋转 基准 点 。 


14 img { 4 全 4 士 
25 width:199px; height:150px; 执行 结 
16 object-fit:fill; 

17 border:1px solid blue; 

18 left:260px; top:200px; 

19 position:relative; 


29 animation:my-animation 6s infinite linear; 
21 transform-origin:left top; /* 旋转 点 在 左上 和 角 */ 魏 全 
22 } 


3D 变形 效果 


transform 也 可 以 应 用 在 3D 变形 效果 设 定 上 ， 此 时 使 用 格式 如 下 : 
transform: none | transform-function | initial | inherit; 
3D 的 变形 效果 的 transform-function 又 可 分 成 下 列 几 种 : 

移动 : translate3d()、translateZ() 

缩放 : scale3d()、scaleZ() 
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旋转 : rotate3d()、rotateX()、rotateY()、rotateZ() 
透视 : perspective() 
和 矩阵 : matrix3d0) 
口 translate3d (x,y,z) 
移动 函数 ， 可 设 定 x 轴 、y 轴 和 z 轴 的 移动 距离 。z 轴 值 越 大 表示 距离 眼睛 越 近 ，z 轴 不 可 用 百 
分 比 (%) 表示 。 
口 translateZ (z) 
移动 函数 ， 可 设 定 z 轴 的 移动 距离 ，z 轴 不 可 用 百分比 (%) 表示 。 
口 scale3d (x,y,z) 
缩小 或 放大 函数 ， 原 始 对 象 的 尺寸 为 1， 可 设 定 x 轴 、y 轴 和 z 轴 的 缩放 倍数 。 
口 scaleZ (z) 
缩小 或 放大 函数 ， 原 始 对 象 的 尺寸 为 1， 可 设 定 z 轴 的 缩放 倍数 。 
口 rotate3d (x,y,z,angle ) 
对 象 旋转 函数 ， 将 基准 点 和 (xyz) 点 连 成 一 条 直线 ， 如 果 是 正 值 表示 顺 时 针 依 此 线 旋 转 ， 如 果 是 负 
值 表示 逆 时 针 依 此 线 旋 转 。 最 常用 的 角度 单位 是 deg， 例 如 rotate3d (xyYZz45deg)， 表 示 向 右 旋转 45” 。 
口 rotateX (angle ) /rotateY (angle ) /rotateZ ( angle ) 
可 设 定 沿 x 轴 余 轴 /z 轴 旋转 。 
DOD perspective 
透视 ， 可 由 此 设 定 视点 的 距离 。 
DO matrix3d (n1, ,Nn16) 
使 用 4X4 的 矩阵 来 变换 坐标 。 
程序 实例 ch23_12.html : 重新 设计 ch23_11.html， 将 对 象 修改 为 以 y 轴 旋 转 。 这 个 程序 的 第 18 行 
调整 了 图 片 位 置 ， 第 8 行 至 12 行 全 部 改 用 rotateY0 函数 。 


x @keyframes my-animation { 执行 结果 
8 


Q% { transformm: rotateY(9deg); } 
25% { transform:rotateY(90deg); } 


Se% { transform:rotateY(180deg); } 
75% { transform:rotateY(270deg); } 
100% {transform:rotateY(360deg); } 
} 
img { 


width:199px; height:150px; 
object-fit:fill; 

border:1px solid blue; 

left:100px; top:20px; 

position: relative; 

animation:my-animation 6s infinite linear; 


</style> 
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程序 实例 ch23_13.html : 重新 设计 ch23_12.html， 将 对 和 象 改 成 沿 x 轴 旋 转 。 


2 @keyframes my-animation { 行 疆 

8 es { transformm: rotateX(9deg); } 执行 结果 
9 25% { transform:rotatex(90deg); } 

10 50% { transform:rotateX(180deg); } 


11 75% { transform:rotateX(270deg); } 
12 100% {transform:rotateX(360deg); } ES 
13 } 


程序 实例 ch23_14.html : 重新 设计 ch23_13.html， 将 对 象 改 成 沿 z 轴 旋转 。 


7 @keyframes my-animation { 了 全 疆 
8 es { transformm: rotatez(0deg); } 执行 结 
9 25% { transform: rotateZ(99deg); } 

19 Se% { transform: rotateZz(189deg); } 

11 75% { transform:rotateZ(270deg); } 

12 100% {transform:rotatez(360deg); } 

13 } 


在 呈现 3D 视觉 效果 时 ， 常 使 用 透视 效 
果 ， 可 参考 右 图 。 

只 要 适度 使 用 translateZ() 函数 控制 元 素 呈 
现 与 浏览 器 画面 的 距离 ， 以 及 使 用 perspective() 
函数 控制 视点 与 浏览 器 画面 的 距离 ， 就 可 呈现 
3D 元 素 的 三 维 效果 。 在 使 用 上 图 所 示 的 概念 
时 ， 如 果 元 素 往 前 移动 ，z 轴 的 距离 是 负 值 ， 


瑟瑟 部 车 莹 


; translatez() | 


呈现 的 元 素 是 缩小 的 ， 如 果 元 素 往 后 移动 ，z |: 
轴 的 距离 是 正 值 ， 呈 现 的 元 素 是 放大 的 ， 可 参 Se 
考 右 图 。 


下 面 笔者 将 一 步 一 步 引导 读者 实现 网 页 透 
视 效果 。 .- 
程序 实例 ch23_15.html : 列 出 背景 图 和 元 素 
图 。 在 第 24 行 设 定 列 出 背景 图 ， 第 25 行 设 定 
列 出 元 素 图 。 由 于 这 两 张 图 使 用 相同 的 div， 
在 没有 透视 效果 下 ， 元 素 图 只 是 往 前 移 的 
30px， 所 以 彼此 是 重 迭 显示 的 ， 在 执行 结果 中 
只 能 看 到 上 方 的 图 。 


上 
视觉 距离 


perspective( ) 
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1 <ldoctype htmly 


2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

村 <title>ch23 15.html</title> 
6 <style> 

7 div{ 

8 left:19epx3 

9 position:absolute; 

19 width:256px; 

11 height :250px; 

12 background-color:aqua; 
13 font-size:xx-large; 
14 h 

15 #ex { 

16 background- color:yellow; 
17 font-size:x-large; 

18 transform;translatez(-39px); /* 图 片 往 前 移 38px */ 
19 } 

26 </style> 

21 </head> 

22 <body> 


23 “div>HTML5+CSS3</div> 

24 <div id="ex">3D 三 维 效果 网 页 画面 4/div> 
25 </body> 

26 </html> 


程序 实例 ch23_16.html : 重新 设计 ch23_15.html， 将 元 素 图 沿 x 轴 旋 转 30deg。 


18 transform:translateZ(-30px) rotateX(30deg); 执行 结果 


程序 实例 ch23_17.html : 重新 设计 ch23_16.html， 增 加 透视 效果 ， 视 点 位 于 前 方 300px 的 位 置 。 


18 transform:perspective(380px) transtateZ(-39px) rotatex(30deg); 执行 结果 


3D 变形 的 基准 点 


3D 变形 是 以 对 象 元 素 的 中 心 (50%,50%,50%) 为 基准 点 的 ， 但 是 可 以 使 用 本 节 所 述 属性 


transform-origin 更 改 基准 点 。 

transform-origin: x-axis y-axis z-axis | initial | inherit; 
DD x-axis 

定义 基准 点 的 x 坐标 ， 可 能 的 值 是 left、center、right、length 和 %。 
口 y-axis 


定义 基准 点 的 y 坐标 ， 可 能 的 值 是 top、center、bottom、length 和 %。 
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DD z-axis 

定义 基准 点 的 z 坐标 ， 可 能 的 值 是 length 和 %。 

如 果 只 指定 2 个 值 ， 第 3 个 值 将 是 0。 
程序 实例 ch23_18.html : 重新 设计 23_12.html， 设 定 对 象 沿 着 y 轴 旋 转 。 相 较 于 ch23_12.html， 这 
个 程序 只 增加 了 第 21 行 。 


14 img { 行 仁 
15 width:190px; height:158px; 执行 结果 


16 object-fit:fill; 
17 border: 1px sotid blue; 


18 left:100px; top:29px; 

19 position: relative; 

28 animation:my-animation 6s infinite linear; 
21 transform-origin: left bottom; 

22 } 


程序 实例 ch23_19.html : 重新 设计 ch23_17.html， 将 基准 点 改 成 x 轴 在 图 片 中 央 ，y 轴 在 图 片 0 的 
位 置 。 这 个 程序 只 增加 了 第 19 行 。 


15 ex { 人行 疆 

16 background-color:yellow; 执行 结果 
17 font-size:x-large; 

18 transform;perspective(360px) translateZz(-30px) rotateX(30deg); 

19 transform-origin:center bottom; 


新 的 基准 点 


弘 杆 本 设 定 透 视图 视点 距离 


CSS 提供 了 视点 距离 属性 perspective， 可 以 用 这 个 属性 设 定 视 点 距离 。 它 与 23-3 节 所 述 的 
perspective() 函数 最 大 差别 是 ，perspective() 函数 是 用 在 元 素 本 身 ，perspective 属性 是 设 定子 元 素 的 
视点 距离 。 它 的 使 用 格式 如 下 : 


perspective: length | none | initial | inherit; 


DOD length 

元 素 距离 视点 的 距离 。 
DOD none 

默认 值 ， 值 是 0。 


下 面 笔 者 将 一 步 一 步 引导 读者 设 定 视点 距离 。 
程序 实例 ch23_20.html : 视点 距离 perspective 的 应 用 。 这 个 程序 首先 在 第 16 行 设 定 视点 距离 是 
0px， 第 20 行 设 定 在 y 轴 旋转 的 角度 是 0deg， 另 外 ， 在 第 12 行 设 定 了 区 块 底 色 是 aqua， 但 会 被 第 
19 行 子 元 素 设 定 的 黄色 底 色 遮盖 住 。 
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1 <ldoctype html> 23 </head> 

2 <html> ME 

3 <head> 25 <div Ed bo > 
4 meta charset-—"utf-8"> i 
5 <title>ch23 20.html</title> 28 </body> 

6 <style> 29 </html> 

~ div { 

8 position:absolute; 

9 width:200pxs 执行 
10 height:100px; 

11 font-size:large; 

12 background-color:aqua; /* div 廉 色 */ 

13 和 

14 #mybox { 

15 border:3px solid blue; 

16 perspective:Opx; /” 视点 距 高 是 9px */ 

17 } 

18 #ex { = 
19 background-color:yellow;  /* 盒子 原色 =/ 

29 transform:rotateY(edeg); /=* 旋转 0deg */ 

21 } 


22 </style> 


程序 实例 ch23_21.html : 重新 设计 ch23_20.html， 在 第 20 行 设 定子 元 素 沿 y 轴 旋 转 -45deg。 这 样 
就 可 以 看 到 区 块 底 色 与 子 元 素 底 色 的 差别 了 。 


18 #ex { 执 : 
19 background-color:yellow; ”/*” 盒 子 底 色 */ 

29 transform:rotateY(-45deg); /* 旋转 -45deg */ 

21 } 


程序 实例 ch23_22.html : 重新 设计 ch23_11.html， 在 第 16 行将 视觉 距离 设 为 800px。 


14 #mybox { 

15 border:3px solid blue 

16 perspective:8eepx; /* 视点 距离 是 800px */ 
17 } 

18 Hex { 

19 background-color:yellow; 。 /* 介子 底 色  “*/ 

20 transform;rotatey(-45deg); /* 旋转 -45deg */ 

21 } 


程序 实例 ch23_23.html : 设 定 视点 距离 的 应 用 。 这 个 程序 设 定子 元 素 沿 x 轴 旋 转 45deg。 


1 <ldoctype html> 25 </head> 

2 <html> 26 <body> 

3 <head> 27 <div id-"divl"yHTMLSHCSS3 
4 <meta charset="utf-8"> 28 <div id="div2"> 王 者 归来 </div> 
5 <title>ch23 23.html</title> 29 </div> 

6 <style> 38 </body> 

. body { margin-left:30px; margin-top;2gpx; } 31 </htnl> 

8 #div1 { 

9 position:relative; 

19 width;266px3 

11 height:209px; 

12 margin: 5epxs 
13 background-color:aquas; 

14 font-size:xx-large; 

15 perspective:366px;  ”/* 设 定 视点 王 高 396px */ 

16 入 

17 #0iv2 { 

18 padding: sepx; 

19 position:absolute; 

20 font-size:x-large; 

21 background-color:yellow; 

22 transform: rotatex(45deg); 

23 } 


‘</style> 
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透视 图 的 基准 点 


透视 是 以 对 象 元 素 的 中 心 (50%,50%) 为 视点 的 基准 点 ， 使 用 本 节 所 述 属 性 perspective-origin 
可 更 改 视 点 基准 点 。 


perspective-origin: x-axis y-axis | initial | inherit; 
OD x-axis 

定义 基准 点 的 x 坐标 ， 可 能 的 值 有 left、center、right、length 和 %。 
口 y-axis 


定义 基准 点 的 y 坐标 ， 可 能 的 值 有 top、center、bottom、length 和 %。 
程序 实例 ch23_24.html : 重新 设计 ch23_22.html， 将 视点 的 基准 点 设 定 在 对 象 上 方 中 央 位 置 。 程 序 
的 第 17 行 是 我 们 自行 设 定 的 视点 基准 点 。 


14 smybox { 到 
15 border; 3px solid blue; 执行 结果 

16 perspective:866pxj /* 视点 距离 是 868px =/ 

27 perspective-origint center top; /* 视点 基准 点 是 中 央 上 方 */ 新 的 视点 基准 点 


18 } 


ZE 居间 状 元 素 产 生 时 子 元 素 的 处 理 


transform-style 属性 必须 和 transform 属性 配合 使 用 ， 设 定 在 3D 动画 中 有 梨 状 元 素 时 ， 父 元 素 和 
子 元 素 要 以 何 种 关系 显示 ， 它 的 使 用 格式 如 下 : 


transform-style: flat | preserve-3d | initial | inherit; 
口 flat 

默认 值 ， 即 子 元 素 将 不 保持 父 元 素 的 3D 特效 。 子 元 素 以 平面 方式 投影 到 父 元 素 上 ， 因 此 ， 父 
元 素 部 分 画面 将 被 子 元 素 遮 住 。 
DD preserve-3d 


将 父 元 素 的 3D 效果 套用 在 子 元 素 上 ， 子 元 素 部 分 画面 可 能 被 父 元 素 遮 住 。 
程序 实例 ch23_25.html : transform-style 为 flat 的 应 用 。 


1 <!doctype html> 
2 <html> 
3 <head> 
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4 <meta charset="utf-8"> zw 一 
5 <tittezch23_25.htmt</titte> EE 和 才 熙 ”本 程序 使 用 Chrome 执行 。 
6 <style> 

7 #div1 { | 
8 position: relative; 

9 width:200px; 

10 height:200px; 

11 margin: 3px; 

12 padding:20px; 

13 background-color:aqua; 

14 } 

15 #div2 { 

16 padding: 50px; 

17 position:absolute; 

18 background-color:pink; 

19 transform: rotateY (30deg); 

20 transform-style:flat;  /* 3D 效 果 套 用 在 子 元 素 #/ 

21 本 

22 #div3 { 

23 padding: 50px; 

24 position:absolute; 

25 background-color:yellow; 

26 transform: rotateY (~30deg); 

27 } 

28 </style> 

29 </head> 

30 <body> 


31 <div id="div1"> 

32 <div id="div2">HTML 

33 <div id="div3">CSS</div> 
34 -</div> 

35 </div> 

36 </body> 

37 </html> 


程序 实例 ch23_26.html : 重新 设计 ch23_25.html， 但 是 将 transform-style 属性 值 改 为 preserve-3d。 
这 个 程序 与 前 一 个 程序 唯一 的 差别 在 第 20 行 。 


20 transform-style:preserve-3d;  /* 3D 效 果 套 用 在 子 元 素 */ 


本 程序 使 用 Chrome 执行 。 


是 否 显示 背面 内 容 


动画 对 象 若是 以 x 轴 或 y 轴 旋转 时 ， 当 转 了 180deg， 会 转 到 背面 ， 这 时 可 以 用 backface- 
visibility 属性 值 设 定 是 否 显示 背面 的 数据 。 


backface-visibility: visible | hidden | initial | inherit; 
口 visible : 默认 值 ， 即 显示 背面 内 容 。 口 _hidden : 不 显示 背面 内 容 。 
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程序 实例 ch23_27.html : 显示 背面 内 容 的 应 用 。 


1 <ldoctype html> 4 一 人士 

1 at 执行 结果 

3 <head> 

4 <meta charset="utf-8"> 人 


5 <title>ch23 27.html</title> 
6 <style> 
7 


smybox { 
position:relative; 

9 width: 206px; 

19 height:166px; 

Eh Margin: 36px; 

12 padding:2epx; 

FE color;blue; 

14 background-color: yellow; 

15 } 

16 #ex { 

17 transform:rotateY(189deg); /* 转 到 背面 */ 

18 backface-visibility:visibile; /* 显示 */ 

19 } 

28 </style> 

21 </head> 

22 <body> 


23 《div id="mybox"> 

24 <div id="ex">HIMLS+CSS3¢/div> 
25 ¢/div> 

265 </body> 

27 </html> 


程序 实例 ch23_28.html : 重新 设计 前 一 个 程序 ， 这 个 程序 将 不 显示 背面 内 容 。 这 个 程序 与 前 一 程 
序 唯 一 的 差别 在 第 18 行 ， 即 将 backface-visibility 设 为 hidden 。 


18 backface-visibility;hidden; 。 /* 隐 茂 */ 执行 结果 


习题 
1. 请 重新 设计 ch23_17.html， 基 准点 不 变 ， 将 z 轴 往 前 移 130px， 沿 y 轴 旋转 -30deg， 视 点 是 
300px， 以 得 到 下 图 所 示 结 果 。 


2. 请 用 自己 的 相片 设计 两 个 钟 摆 效应 的 特效 ， 其 中 一 个 基准 点 在 图 片 中 央 ， 另 一 个 基准 点 在 其 上 方 
中 央 。 细 节 读 者 可 以 发 挥 创 意 ， 自 行 设 定 。 

3. 请 为 自己 的 父母 亲 设 计 网 页 ， 这 个 网 页 必须 要 使 用 本 章 所 介绍 的 特效 ， 其 他 细节 可 以 自行 发 挥 
创意 。 


响应 式 (RWD ) 网 页 设计 


本 章 摘要 
24-1 设置 鼠标 指针 的 形状 
24-2 媒体 查询 


24-3 ”选择 器 完整 说 明 
24-4 ”响应 式 网 页 设计 


绝 大 部 分 的 CSS 功能 在 前 面 各 章 已 经 讲解 完了 ， 这 一 章 将 针对 尚未 介绍 的 部 分 做 一 个 完整 
解说 ， 最 后 将 在 24-4 节 讲解 目前 流行 的 主题 ， 响 应 式 网 页 设计 ( Responsive Web Design )。 
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设置 鼠标 指针 的 形状 


设计 网 页 时 ， 也 许 想 要 将 鼠标 指针 设 为 特别 形状 ， 此 时 可 以 使 用 cursor 属性 。 


cursor: Value7 


value 的 内 容 如 下 : 
alias 区 allscroll 他 auto BR cell 中 contextmenu 酒 
col-resize 中 copy 导 ”crosshair 十 default Ne-resize i 
ew-resize qd grab oo grabbing oo help Re move 名 
n-resize 1 nesw-resize wn ns-resize 人 nwiresize % no-drop @ 
none © not-allowed © pointer J Progress row-resize 椰 
s-resize 1 se-resize  ®» sw-resize 鹃 text ft URL [2) 
Vertical-text 上 WwW-resizw oo wait oo zoom-in @ zoom-out Q 
程序 实例 ch24_1.html : 将 鼠标 光标 移 到 字符 串 时 ， 可 以 更 改 光 标 外 形 。 
1 cldoctype html> =y 士 
2 <html> 执行 结果 
3 <head> 
4 <meta charset-"utf-8"> ee es | 
5 ctitleych24 1.htmlk/titley 请 将 鼠标 指向 下 列 字 符 串 ， 鼠 标 光标 将 改变 
6 <style> 
7 span#crosshair { cursor:crosshair; } crosshair 
8 spanke-resize { cursorie-resizei } 各 
9 spanghelp { cursor:help; } hh 
19 spangpointer { cursor:pointer; } 
11 span#progress { cursor:progress; } Ep 
12 span#wait { cursor:wait; } ait 
13 spanknot-allowed { cursor:not-allowed; } not-allowed | 
14 } 
15 </style> 
16 «</head> 
17 <body> 请 将 鼠标 指向 下 列 字符 串 ， 鼠 标 光标 将 改变 
18 “<p> 请 将 鼠标 指向 下 列 字符 卓 ， 妇 标 光标 将 改变 </py> _ 
19 <span rasshair">crosshair</spany<br> crosshair 
20 <span -resize">e-resizec/span><br> e-resize 
21 <span ‘elp">help</span><br> help 


22 <span 
23 <span 
24 <span lait ">wait</span><¢br> wait 

25 <span id="not-allowed">not-allowed</span><br> not-allowed 


ointer">pointer</span><br> pointes 
rogress">progress¢/span><br> progkyp ) 


26 </body> 
27 </html> 


7 媒体 查询 


CSS 提供 让 程序 设计 师 针 对 不 同 的 输出 工具 套用 不 同 的 样式 表 的 功能 ， 这 表示 一 份 HTML 文件 
可 以 同时 供 不 同 的 设备 使 用 一 一 也 许 是 普通 的 计算 机 屏幕 、 平 板 电 脑 ， 也 可 能 是 iOS 或 Android 手 
机 屏幕 等 ; 又 如 ， 在 屏幕 输出 时 可 以 使 用 sans-serif 字体 、 打 印 机 打印 时 使 用 serif 字体 、 为 有 听觉 
障碍 的 终端 用 户 设 计 使 用 voice-family 字体 等 ; 此 外 ， 可 以 为 计算 机 屏幕 浏览 器 设 定 较 宽 的 窗口 ， 为 
手机 屏幕 浏览 器 的 浏览 宽度 或 高 度 设 定 较 窗 的 窗口 。 

本 章 笔 者 将 以 实例 说 明 在 考虑 上 述 情况 下 ， 设 计 适 用 于 多 种 设备 的 网 页 程序 。 
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24-2-1 媒体 类 型 


下 列 是 CSS 中 定义 的 媒体 类 型 (media types)。 

all : 所 有 媒体 。 

print : 打印 预览 或 打印 机 的 打印 稿 。 

screen : 计算 机 屏幕 、 平 板 电 脑 或 Android (iOS) 系统 的 智能 手机 屏幕 。 
speech : 音频 合成 装置 。 

aural : 建议 弃 用 (Deprecated)， 用 于 语音 和 音频 合成 器 。 

braille : 建议 弃 用 ， 盲 人 点 字 触 觉 设 备 。 

embossed : 建议 弃 用 ， 盲 人 点 字 机 。 

handheld : 建议 弃 用 ， 手 持 装 置 。 

projection : 建议 弃 用 ， 投 影 。 

tty : 建议 弃 用 ， 文 字 固定 宽度 的 媒体 ， 例 如 电 传 打 字 机 或 终端 机 。 
tv : 建议 弃 用 ， 电 视 类 别 的 设备 。 


24-2-2 媒体 特性 


下 列 是 CSS 中 定义 的 媒体 特性 (media features )。 

color : 输出 设备 〈 屏 幕 ) 每 个 色彩 的 位 数 bits)。 

color-index : 输出 设备 〈 屏 幕 ) 可 以 输出 的 色彩 数量 。 

height : 浏览 器 窗口 的 高 度 。 

device-height : 建议 弃 用 ， 输 出 设备 〈 屏 幕 ) 的 高 度 。 

width ; 浏览 器 窗口 的 宽度 。 

device-width : 建议 弃 用 ， 输 出 设备 〈 屏 幕 ) 的 宽度 。 

aspect-ratio ; 浏览 器 窗口 宽度 和 高 度 的 比 。 

device-aspect-ratio : 建议 弃 用 ， 输 出 设备 〈 屏 幕 ) 宽度 和 高 度 的 比 。 

monochrome : 黑白 屏幕 每 个 色彩 的 位 数 。 

resolution : 输出 设备 〈 屏 幕 ) 的 屏幕 分 辨 率 ， 单 位 是 dpi 或 dpcm。 

上 述 所 有 属性 皆 可 以 加 上 前 绥 词 “min-” 或 “max-” 表 示 “ 最 小 值 ”或 “最 大 值 >， 例 如 “min- 
width” 表 示 浏 览 器 窗口 的 最 小 宽度 。 

orientation : 输出 设备 〈 屏 幕 ) 的 方向 ， 可 能 值 是 landscape (水 平 ) 或 portrait (垂直 )。 

scan : 输出 设备 〈 屏 幕 ) 的 扫描 方式 ， 可 能 值 是 interlace (交错 式 ) 或 progressive 〈 循 
序 式 )。 

grid : 输出 设备 (屏幕 ) 的 扫描 方式 ， 可 能 值 是 1 (网 格 grid) 或 0( 点 阵 bitmap)。 


24-2-3 媒体 查询 设计 使 用 @media 
媒体 查询 设计 的 格式 如 下 : 


@media media-type and (media-feature ) … and (media-feature ) { 
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} 
实例 1 : 下 列 是 设 定 输出 设备 为 打印 机 (print) 时， 使 用 serif 字体 ， 颜 色 为 蓝 色 的 代码 。 


@media print { 
body { font-family:serif; color:blue; } 
} 


实例 2 : 下 列 是 设 定 输出 设备 为 屏幕 (screen) 时 ， 使 用 sans-serif 字体 ， 颜 色 为 红色 的 代码 。 
@media screen { 

body { font-family:sans-serif; color:red; } 
} 


实例 3 : 下 列 是 设 定 窗口 宽度 小 于 或 等 于 480px 时 ， 背 景色 为 粉红 色 的 代码 。 
@media screen and ( max-width ) { 
body { background-color:pink; } 
} 


程序 实例 ch24_2.html : 设 定 如 果 窗 口 宽度 大 于 480px， 背 景色 是 黄色 ， 段 落 字号 是 medium ; 如 果 
窗口 宽度 等 于 或 小 于 480px， 背 景色 是 粉色 ， 段 落 字号 是 small。 这 个 程序 须 留 意 第 10 行 ,“(max- 
width:480px)” 的 “px” 后 面 没 有 “:;” 符 号 。 


1 
有 
3 


<1doctype html> | 执行 结果 | 
<html> 


<head> 
<meta charset="utf-8"> 
<title>ch24 2.html</title> 
<style> 
body { 


background-color:yellow; 


@media screen and (max-width:489px) { 
body { 
background-color:pink; 


p { font-size:small; } 


上 
</style> 
</head> 
<body> 
<h1> 请 更 改 窗 口 宽度 </h1> 
《p> 窗口 宽度 小 于 486px 时 背景 底 色 和 字号 会 改变 </p> 
</body> 
</html> 


程序 实例 ch24_3.html : 手机 、 平 板 电脑 、 计 算 机 浏览 器 分 辩 率 的 测试 。 这 个 程序 在 执行 时 ， 如 果 
浏览 器 宽度 小 于 或 等 于 480px， 使 用 small 字体 、 背 景色 是 浅 灰色 ; 如 果 浏 览 器 宽度 大 于 480px、 小 
于 或 等 于 1279px， 使 用 medium 字体、 背景 色 是 浅 蓝 色 ; 如 果 浏览 器 宽度 大 于 或 等 于 1280px， 使 用 
large 字体 、 背 景色 是 黄色 。 
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nd 下 图 是 本 例 在 3 种 不 同窗 口 宽度 


3 a 
; 下 的 执行 结果 。 


5 
6 <styley 
7 
a 


media screen and (min-width:1289px) { /” 计算 机 忆 徐 */ 
body { 
9 font-sizetlarges 四 
18 background-color:yellow; 
1 } Ce 
12 】 
33 media screen and (wax-width:1279px) and (min-width:as1px) {。 1” 二 板 计 算 机 "/ 
14 body { 
15 font-size: nedium; 


16 background-color:liehtblue; 

17 } 

18 } 

19 Bmedia screen and (max-width:4eepx) { Cd 
29 body { 

21 font -size:small; 

2 background-color:1ightaray; 


了 
25 </style> 
26 </head> 
27 <body> 
26 <p> 请 更 改 究 口 宽度 </p> 
29 «</body> 
39 </html> 


实例 4 : 下 列 是 设 定 输出 设备 〈 屏 幕 ) 为 水 平 〈landscape) 显示 时 ，hl 是 蓝 色 的 代码 。 


@media all and ( orientation:landscape ) 
hl { color:blue; } 
} 


实例 5 : 下 列 是 设 定 输出 设备 〈 屏 幕 ) 为 垂直 〈portrait) 显示 时 ，hl 是 绿色 的 代码 。 


@media all and (orientation:portrait ) { 


hl { color:green; } 


24-2-4 ”媒体 查询 设计 使 用 <link> 
使 用 <link> 元 素 读 取 外 部 媒体 输出 的 样式 表单 时 ， 需 要 在 <link> 元 素 内 增加 媒体 属性 如 下 : 


<link rel="stylesheet" type="text/css" media=" 媒体 属性 值 " href="URL"> 


程序 实例 ch24_4.html : 以 link 元 素 读 取 外 部 文件 方式 重新 设计 ch24_2.html。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch24 4.html</title> 
<link rel="stylesheet" media="screen” href="screenstyle.css"> 
</head> 
<body> 
9 <h1> 请 更 改 窗 口 宽度 <(/h1> 
19 <p> 窗 口 宽度 小 于 48epx 时 背景 床 色 和 字号 会 改变 </p> 
11 </body> 
12 </html> 


screenstyle.css 内 容 如 下 : 与 ch24 2.html 相同 。 


body { 
background-color:yellow; 


oawmbhuwnP 


} 
@media screen and (max-width:480px) { 
body { 
background-color:pink; 
有 
p { font-size:small; } 


odaupwNp 


} 
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24-2-5 媒体 查询 设计 使 用 @import 


CSS 也 允许 使 用 “@import url (URL)” 将 外 部 样式 表 导 入 后 再 查询 。 
程序 实例 ch24_5.html : 以 “@import” 重 新 设计 ch24 4.html。 


1 <ldoctype html> 与 ch24 2.html 相同 。 
2 <html> 

3 <head> 

a <meta charset="utf-8"> 

5 <title>ch24 5.html</title> 

6 <style> 

7 Qimport url(screenstyle.css); 
</style> 

9 </head> 

19 <body> 

11 <h1> 请 更 改 窗口 宽度 </h1> 

12 《py 窗口 宽 度 小 于 489px 时 背景 底 色 和 字号 会 改变 </p> 
13 </body> 

14 </html> 


时 选择 器 完整 说 明 


” 


在 第 11 章 笔者 讲解 了 常用 选择 器 的 应 用 ， 接 着 在 第 12~24 章 对 这 些 常用 的 选择 器 做 进一步 说 


明 ， 下 面 是 CSS 所 有 选择 器 的 使 用 说 明 。 

口 .class 范例 : .ex 
所 有 class="ex" 皆 套 用 。 

口 #id 范例 : #name 
所 有 id="name" 皆 套 用 。 

口 “ 范例 :* 
所 有 元 素 套用 。 

口 _ element 范例 : p 
所 有 <p> 元 素 套用 。 

口 element,element ”范例 : p, div 
所 有 <p> 元 素 和 <div> 元 素 套用 。 


口 _ element element ”范例 :divp 
所 有 在 <div> 元 素 内 的 <p> 元 素 套 用 。 
口 element>element 范例: div>p 
所 有 <p> 元 素 的 父 元 素 是 <div> 时 套用 。 
口 element+element 范例 :div+p 
所 有 <p> 元 素 紧 跟 在 <div> 元 素 后 面 时 套用 。 
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口 element~element “范例 : p~ul 
所 有 <ul> 元 素 紧 跟 在 <p> 元 素 后 面 时 套用 。 

品 [attribute] 范例 : [target] 

所 有 元 素 有 target 属性 时 套用 。 

口 [attribute=value] ”范例 : [target=xxx] 

所 有 元 素 有 属性 target=xxx 时 套用 。 

口 [attribute~=value] ”范例 : [title~=xxx] 

所 有 元 素 有 属性 值 内 容 包 含有 xxx 字符 串 时 套用 。 

口 [attribute|=value] ”范例 : [lang|=zh] 

所 有 元 素 有 lang 属性 值 内 容 包 含 zh 时 套用 。 

口 [attribute^=value] ”范例 : a[href^="http"] 

所 有 <a> 元 素 的 href 属性 值 内 容 包 含 http 时 套用 。 

口 [attribute$=value] ”范例 : afhref$=".xps"] 

所 有 <a> 元 素 的 href 属性 值 内 容 以 .xps 结尾 时 套用 。 

口 [attribute*=value] ”范例 : a[href*="deepstone"] 
所 有 <a> 元 素 的 href 属性 值 包含 deepstone 子 字符 串 时 套用 。 


口 :active 范例 : a:active 
单 击 超 链接 时 套用 。 

口 :after 范例 : h2:after 
在 每 一 个 <h2> 元 素 后 面 插入 内 容 。 

口 :before 范例 : h2:before 
在 每 一 个 <h2> 元 素 前 面 插入 内 容 。 

口 :checked 范例 : input:checked 
所 有 被 核 取 的 <input> 元 素 套用 。 

口 :disabled 范例 :input:disabled 
所 有 无 法 使 用 〈disable) 的 <input> 元 素 套用 。 

口 :empty 范例 : td:empty 
单元 格 内容 是 空 的 <td></td> 就 套用 。 

口 :enabled 范例 : input:enabled 
所 有 可 以 使 用 〈enable) 的 <input> 元 素 套用 。 

口 :first-child 范例 : p:first-child 
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所 有 <p> 元 素 ， 套 用 条 件 是 必须 是 其 父 元 素 的 第 一 个 子 元 素 。 


::first—letter 范例 : p::first-letter 
选取 所 有 <p> 元 素 的 第 一 个 字母 。 

:first-line 范例 : p::first-line 
选取 所 有 <p> 元 素 的 第 一 行 。 

:first-of-type 范例 : p::first-of-type 
同一 个 父 元 素 中 第 一 个 出 现 的 <p> 元 素 套用 样式 。 
:focus 范例 : input:focus 
<input> 元 素 获得 焦点 (focus) 时 套用 。 
:hover 范例 : h1:hover 

鼠标 指针 在 <h1> 元 素 时 套用 。 

:in-range 范例 :input:in-range 
值 在 <input> 元 素 中 设 定 范围 时 套用 。 

:invalid 范例 :input:invalid 
<input> 元 素 的 值 是 无 效 时 套用 。 


:lang (language) ”范例 : ht:lang (fr) 
hl 的 语言 属性 值 是 法 文 时 套用 。 


:last-child 范例 : p:last-child 

所 有 <p> 元 素 ， 套 用 条 件 是 必须 是 其 父 元 素 的 最 后 一 个 子 元 素 。 
:last—of-type 范例 : p:last-of-type 

同一 个 父 元 素 中 最 后 一 个 出 现 的 <p> 元 素 套用 样式 。 

:link 范例 : a:link 

尚未 被 单 击 的 超 链接 套用 。 

:not ( selector ) 范例 : :not (h1 ) 

所 有 非 <hl> 元 素 套用 。 


:nth-child (n) 范例 : tr:nth-child (2n ) 

表格 偶数 行 套用 。 

:nth-last-child (n ) 范例 : p:nth-last-child (2) 

由 后 往 前 数 第 2 个 <p> 属性 套用 。 

:nth-last-of-type (n) 范例 : p:nth-last-of-type (2) 
由 后 往 前 数 第 2 个 <p> 属性 套用 。 
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口 :nth-of-type (n) 范例 : p:nth-of-type (2) 
相同 父 元 素 中 所 有 第 2 个 <p> 元 素 套用 。 
口 :only-of-type 范例 : p:only-of-type 
元 素 中 可 能 有 许多 子 元 素 ， 其 子 元 素 中 <p> 是 唯一 的 ， 套 用 这 个 唯一 的 <p> 元 素 。 
口 :only-child 范例 : p:only-child 
每 一 个 <p> 元 素 是 它 的 父 元 素 中 唯一 的 子 元 素 套用 。 
口 :optional 范例 : input:optional 
在 <input> 元 素 中 ， 没 有 必要 (required) 属性 时 套用 。 
口 :out-of-range 范例 : input:out-of-range 
值 不 在 <input> 元 素 中 设 定 范围 时 套用 。 
口 :read-only 范例 :input:read-only 
在 <input> 元 素 中 属性 是 readonly 时 套用 。 
口 :read-write 范例 :input:read-write 
在 <input> 元 素 中 属性 不 是 readonly 时 套用 。 
口 :required 范例 : input:required 
在 <input> 元 素 中 属性 是 required 时 套用 。 
口 :root 范例 : :root 
在 HIML 文件 的 根 元 素 套用 。 
口 ::selection 范例 : ::selection 
所 有 使 用 者 选取 的 范围 省 套用 。 
口 :valid 范例 : input:valid 
允 有 有 效 值 的 所 有 <input> 元 素 皆 套用 。 
口 :visited 范例 : a:visited 
选取 所 有 拜访 过 的 元 素 。 


上 述 选择 器 的 功能 是 很 强大 的 ， 下 面 将 以 一 个 应 用 做 解说 。 
程序 实例 ch24_6.html : 修改 项 目 列表 符号 。 这 个 程序 先 删除 了 默认 的 项 目 符号 (第 8~11 行 )， 然 
后 插入 新 的 项 目 符号 (第 15~19 行 )。 


1 xldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
<title>ch24 6.html</title> 
<style> 

h1 { color:blue; } 

uf 

list-style:none; /* 移 除 原先 项 目 符号 */ 


吕 m Na 
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18 padding:@px; Vd 3 
1 . 执行 结果 


12 下 入 

13 padding-left:10px; 

14 其 

2 he 中 国 台 湾 著名 科技 大 学 
16 content:"e"; /* 插入 新 的 项 目 符号 */ 口 

17 padding-right :5px; 

18 lor:blue; 

I e 明志 科技 大 学 
29 </style> 9 台湾 科技 大 学 
a 。 台北 科技 大 学 
23 <h1> 中 国 台 湾 著名 科技 大 学 </h1> 

24 <ul> 


25 “1iy> 明 志 科技 大 学 /1i> 
26 。 “1i> 台 湾 科 技 大 学 </1i> 
27 ”<1i> 台 北 科技 大 学 </1i> 
28 </body> 
29 </html> 
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过 去 网 页 设计 是 供 PC 使 用 者 浏览 的 ， 现 在 是 手机 、 平 板 电脑 的 年 代 ， 消 费 者 也 会 常常 使 用 手 
机 或 平板 电脑 浏览 网 页 。 手机、 平板 电脑 、PC 之 间 最 大 的 差异 是 浏览 器 窗口 宽度 不 同 。 在 响应 式 网 
页 设计 兴起 前 ， 手 机 或 平板 电脑 常常 因为 屏幕 宽度 不 足 ， 必 须 将 页 面 滑 来 滑 去 ， 方 可 获得 想 要 的 信 
息 ， 有 了 响应 式 网 页 设计 ， 就 可 以 针对 使 用 者 的 设备 调整 网 页 呈现 方式 ， 彻 底 解决 了 用 户 设备 接口 
的 问题 ， 本 节 将 讲解 响应 式 网 页 设计 原理 与 实际 案例 。 下 面 是 同一 个 网 页 在 手机 、 平 板 电脑 、PC 屏 
幕 显示 的 说 明 。 


课 度 学 习 滴水 穿 厂 


eh? Rannd 
性 钊 > 


ore | 
ee Ee 
笋 为 和 局 从 约 失语 个 分 区 
ET 一 


深度 学 习 滴 水 穿 石 
pe 
次 作 。 友 区 寺村 本 轩 夺 届 新 尖 并 学 方法。 让 判 人 
a ares 
平板 总 = 
Rn 
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24-4-1 响应 式 网 页 实例 


接 下 来 将 介绍 响应 式 网 页 实例 ch24_7.html， 这 个 网 页 在 PC 屏幕 呈现 的 效果 如 下 : 


到 滩 度 学 习 演 水 穿 
MS 
ee 


至 固 
各 度 全 习 注 水 守 厂 


ee 


24-4-2 设计 响应 式 网 页 的 基本 原则 


对 于 响应 式 网 页 而 言 ， 主 要 要 掌握 的 原则 如 下 : 
(1) 使 用 HTML 设计 网 页 内 容 。 
(2) 为 手机 浏览 屏幕 设计 CSS 样式 表 ， 让 网 页 可 在 手机 屏幕 完美 呈现 。 
(3) 为 平板 电脑 浏览 屏幕 设计 CSS 样式 表 ， 让 网 页 可 在 平板 屏幕 完美 呈现 。 
(4) 为 PC 屏幕 设计 CSS 样式 表 ， 让 网 页 可 在 PC 屏幕 完美 呈现 。 
你 可 以 参考 ch24_4.html， 将 上 述 CSS 样式 表 读 入 程序 ， 这 样 就 可 以 完成 响应 式 网 页 设计 了 ， 只 
不 过 你 的 网 页 将 由 4 个 程序 组 成 。 当 然 ， 如 果 你 功力 高 强 ， 也 可 以 轻松 地 使 用 选择 器 只 用 一 个 程序 
完成 响应 式 网 页 设计 ， 笔 者 正 准备 教 你 只 用 一 个 程序 完成 这 个 工作 。 


24-4-3 viewport 


viewport 指 的 是 屏幕 分 辨 率 ， 会 因为 所 使 用 的 设备 而 有 不 同 的 值 。 在 设计 响应 式 网 页 时 ， 必 须 
在 <meta> 元 素 内 进行 下 列 设 定 。 


<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


口 <meta> 的 值 viewport 将 告诉 浏览 器 如 何 控 制 页 面 尺寸 和 比例 。 
口 “width=device-width， 可 以 获得 浏览 设备 的 宽度 分 辨 率 ( pixel )。 
口 initial-scale=1.0， 可 以 设 定 在 网 页 插入 图 案 时 的 初始 缩放 比例 。 
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设计 响应 式 网 页 有 下 列 原则 : 

由 于 浏览 屏幕 宽度 是 不 固定 的 ， 所 以 不 要 采用 固定 宽度 ， 应 采用 百分比 来 设置 宽度 。 

图 像 宽度 不 要 大 于 浏览 屏幕 宽度 ， 以 免 需 水 平 滚动 来 浏览 网 页 。 

由 于 每 一 种 设备 的 分 辨 率 不 同 ， 设 计 网 页 时 不 能 只 考虑 一 种 屏幕 宽度 。 

使 用 绝对 值 定位 要 特别 小 心 ， 特 别 是 大 尺寸 的 绝对 值 ， 若 不 小 心 ， 就 会 落 到 浏览 显示 区 外 。 
为 了 完成 上 述 设计 工作 ， 笔 者 设计 内 容 如 下 : 


§ <meta name="viewport" content="width=device-width, initial-scale=1.0"> 


Dg 


24-4-4 ”浏览 画面 设计 


在 这 个 程序 设计 中 ，<header> 或 <footer> 元 素 不 论 在 哪 一 种 浏览 画面 环境 下 ， 它 们 的 宽度 皆 是 
浏览 宽度 的 100%。 


深度 学 习 滴水 穿 石 


王 放 半 维 让， 拓 全 了 人 天 、 玫 必 、 玫 凡 ，“ 二 
区 研 、 旷 件 、 基 六 等 村 太 库 计 有 洒 记 度 守 习 太 讼 从 
人 信守 有 Hi。 


ey 


所 以 这 个 程序 的 设计 关键 就 在 于 中 间 那 3 栏 的 数据 。 

在 这 个 程序 中 笔者 将 使 用 手机 当 作 默认 的 浏览 界面 ， 即 当 浏览 宽度 小 于 和 等 于 480px 时 为 手 
机 浏览 画面 。 在 这 种 情况 下 ， 每 一 个 栏 的 宽度 与 手机 屏幕 宽度 相同 ， 可 以 从 上 往 下 很 流畅 地 显示 网 
页 ， 可 参考 下 图 。 


深度 学 习 滴水 穿 石 


殖 力 于 最 先进 的 玫 育 ， 寺 合 了 蔬 中 、 教 村 、 教 及- 
专业 认证 、 鸭 件 、 云 增 等 技术 迁 过 由 新 深度 学 习 
方法 。 先 到 人 人 学 有 所 用 的 目标 


到 国 


为 平板 电脑 的 设计 是 浏览 宽度 大 于 480px 但 是 小 于 等 于 768px， 这 时 中 间 3 栏 将 显示 2 栏 , 其 
中 第 一 栏 导 览 列 <nav> 将 占 浏览 宽度 的 25%， 第 二 栏 文章 区 <article> 将 占 浏览 宽度 的 75%。 此 时 第 
3 栏 侧 边栏 <aside> 将 在 下 一 行 (row) 显示 ， 它 所 占 的 浏览 宽度 是 100%。 


Yi 
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深度 学 习 滴水 穿 石 


致力 于 最 先进 的 教育 。 综 合 了 书 糖 、 教 材 、 教 县、 专业 ; 
件 、 人 A 


JobExam | 


针对 PC 屏幕 笔者 设计 第 一 栏 导 览 列 <nav> 占 浏览 宽度 的 25%， 文 章 区 <article> 占 浏览 宽度 的 
50%， 侧 边栏 占 浏览 宽度 25%。 笔 者 使 用 下 列 方式 设计 @media 叙述 。 


23 @media only screen and (min-width: 481px) { 1/* 以 下 是 平板 屏 碍 的 BMedia */ 


24 ,col-s-25 {width; 25%;} /*”nav 快 用 

25 ‘C01-s-75 {width; 75%;} /1* article 使 用 3 

26 ,col-s-100 {width: 160%;} /* aside 使 用 妥 

sy 

28 @media only screen and (min-width: 769px) { /* 以 下 是 PC 屏幕 的 Bedia */ 

29 ,col-25 {width; 25%;} /1 nav 有 aside 使 用 “/ 

39 ,Co1-59 {width:; 56%;} /* article 使 用 4 

3 扩 } 

上 述 代 码 定义 了 浏览 画面 的 宽度 ， 我 们 可 以 针对 上 述 宽度 增设 一 些 CSS 样式 ， 笔 者 的 设计 如 下 : 

17 [class*="col-"] { J” 所 有 column 的 样式 设 定 。“/ 


18 float; left; 
19 padding:15px; 
29 width: 168%; 


上 述 代码 意 为 以 “col-” 开 头 定义 的 皆 套 用 ， 所 以 所 有 栏 的 属性 已 经 设 定 了 。 
24-4-5 导 览 区 套用 样式 表 


导 览 区 内 容 如 下 : 
83 xnav class="col-25 col-s-25 menu"> <1-- 导 览 区 -> 
84 <ul> <1- - 建立 表格 数据 -> 
85 <1i>SSE Certificate</li> 
86 <1i>JobExam</1i> 
87 <1i> 计 算 机 类 书籍 出 版 </1i> 
88 《1i> 生 活 类 书籍 出 版 </1i> 
89 </ul> 
99 </nav> 


上 述 导 览 区 第 83 行 代码 的 意义 是 套用 “col-25”“col-s-25”“menu” 样 式 表 。 笔 者 在 样式 表 定 
义 名 称 用 了 数字 25， 代 表 占 屏幕 宽度 25%， 这 表示 如 果 是 平板 屏幕 media@ 可 以 得 到 “col-s-25” 
这 个 样式 〈 在 第 83 行 设 定 )， 所 以 就 会 套用 第 24 行 的 样式 ; 如 果 是 PC 屏幕 media@ 可 以 得 到 “col- 
25” 这 个 样式 在 第 83 行 设 定 )， 所 以 就 会 套用 第 29 行 的 样式 ; 如 果 是 手机 屏幕 ， 由 于 表示 使 用 默 
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认 值 ， 网 页 会 以 100% 宽度 占据 屏幕 。 
24-4-6 文章 区 套用 样式 表 


文章 区 内 容 如 下 : 
91 <article class="col-58 col-s-75"> <1-- 文章 区 --》 
92 <h1> 深 度 学 习 滴水 穿 石 </h1> 《<1-- 建立 第 2 栏 内 容 -> 
93 《p> 致力 于 最 先进 的 教育 ， 综 合 了 书籍 、 教 材 、 教 具 、 专 业 认证 、 软 件 
94 、 云 端 等 技术 透 过 最 新 深度 学 习 方 法 ， 达 到 人 人 学 有 所 用 的 目标 。</p> 
95 <img src="mybook,jpg”width="369"> <1-- 插入 图 片 -> 


96 </article> 


上 述 文章 区 第 91 行 代码 的 意义 是 套用 “col-50”“col-s-75” 样 式 表 。 笔 者 在 样式 表 定义 名 称 用 
了 数字 50， 代 表 占 屏幕 宽度 50%， 数 字 75 则 代表 占 屏幕 宽度 的 75%， 如 果 是 平板 屏幕 media@ 可 
以 得 到 “col-s-75” 这 个 样式 (在 第 91 行 设 定 )， 所 以 就 会 套用 第 25 行 的 样式 ; 如 果 是 PC 屏幕 
media@ 可 以 得 到 “col-50” 这 个 样式 (在 第 91 行 设 定 )， 所 以 就 会 套用 第 30 行 的 样式 ; 如 果 是 手 
机 屏幕 ， 由 于 表示 使 用 默认 值 ， 网 页 会 以 100% 宽度 占据 屏幕 。 


24-4-7 侧 边 栏 区 套用 样式 表 


侧 边栏 区 内 容 如 下 : 
97 《div class="col-25 col-s-100"> 
98 <aside> 《<1-- 侧 边 搓 -> 
99 <h2>ssE</h2> 《1-- 建立 第 3 栏 内 容 3 
199 <p>Silicon Stone Education 国 际 认 证 领导 品牌 </p> 
191 <h2>JobExam</h2> 
192 <p》“ 劳 动 部 "金融 研 训 院 专业 认证 </py 
193 <h23 信 息 图 书 </h2> 
194 <p> 大 数据 、 物 联网 、 云 技术 、30D 动 画 设计 </p> 
195 </aside> 


166 /div> 


上 述 文章 区 第 97 行 代码 的 意义 是 套用 “col-25?“col-s-100” 样式 表 。 笔 者 在 样式 表 定义 名 称 用 
了 数字 25， 代 表 占 屏幕 宽度 25%， 数 字 100 代表 占 屏 幕 宽度 100%， 这 表示 如 果 是 平板 屏幕 media@ 
可 以 得 到 “col-s-100” 这 个 样式 〈 在 第 97 行 设 定 )， 所 以 就 会 套用 第 26 行 的 样式 ; 如 果 是 PC 屏幕 
media@ 可 以 得 到 “col-25” 这 个 样式 (在 第 97 行 设 定 )， 所 以 就 会 套用 第 29 行 的 样式 ; 如 果 是 手 
机 屏幕 ， 由 于 表示 使 用 默认 值 ， 网 页 会 以 100% 宽度 占据 屏幕 。 


24-4-8 其 他 设计 
下 列 是 设 定 内 边 距 〈(padding) 和 边框 (border) 已 经 包含 在 元 素 宽度 和 高 度 内 的 代码 。 


8 <style> 
a { /* 确定 padding 和 border 已 经 包含 在 元 束 宽 度 和 高 度 内 */ 
10 box-sizing: border-box; 
人 
下 列 是 在 row 区 块 下 方 插入 空格 ， 同 时 取消 左边 图 旁 串 字 的 代码 。 
12 .row::after { /* 在 整个 row 下 面 增加 空格 内 容 */ 
13 content;""; 
14 clear:left; 
15 display:table; 
16 } 


293 人 
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以 下 设 定 图 片 呈现 的 最 大 宽度 是 100% 屏幕 宽度 。 


76 img { 

71 max-width: 168%; /* 图 片 呈现 最 大 宽度 CSS */ 
3 height: auto; 

73 } 


24-4-9 ”完整 程序 内 容 


1 <lDoCTYPE htnl> 59 text-align:centen; 
2 <html> 0 font-size:1Spn; 
3 <head> 61 baxrshadow; gray 3px 3px 3px; 
4 cneta chanset="utf-8"> 52 }) 
5 <neta nane="viewport” content="width-device-width, initial-scale-1.0"> 3 footer { /* 设计 footer 股 入 区 C55 ay/ 
5 <titleych24_7.htmlt/titley rT 
5 55 color:blue; 
gt /* 确定 padding 和 border 已 经 包 舍 在 元 系 帘 应 高 度 内 */ 5 sexe-2lign: conter; 
18 box-sizing: border-box; Se er td 
a 68 padding:15px; 
12 rewirefter { /* 在 整个 row 下 面 增 加 空格 内 容 */ 9 ) 
i sy 78 ing { 
14 71 max -width: 196%; /* 图 片 呈 现 最 大 宽 麻 c55 */ 
15 display:table; < 
146 } 73 
17 [classr="col-"] { 1 所 有 columr 的 样式 没 定 "74 </style> 
二 float: left; 75 </heady 
19 padding:15px; 76 <body> 
28 width: 186 77 <header> 
21 3 78 。 《hl> 访 石 数字 DeepStone</hi> 
22 /* 默认 是 手机 屏幕 “/ 79 <p>Deep Learningcpy 
23 Gmedia only screen and (min-width; 481px) { /* 以 下 是 平板 屏幕 的 Gedia */ 30 </hesder> 
24 col1-s-25 《width; 25%i 加 ER WY Bl 
25 “Col-s-75 {width: 75%; /1* artich pd ou， | 
25 col-s-100 {width: 100%; Er /2 xdiv class="row> 《1-~ 中 央 栏 区 块 起 始 油 。 -> 
27 } 83 《nav classe"col-25 col-s-25 menu'》 <1-- 导入 区 >» 
28 Gmedia only screen and (min-width: 769px) { 1* 以 下 是 pc 屏幕 的 Bedia */ 84 > < 建立 表格 六 据 | 
29 ,co1-25 {width: 25%;} /* nav 和 aside 使 用 有 85 《1i>SSE Certificatec/1i> 
38 col-50 {width: 50%;} J” article 使 用 " 86 <¢1i>JobExamt /1i> 
31 } 87 《31> 计算 机 天 书 箱 出 版 </1i> 
32 html { /* 设计 HTRL 字 型 的 css */ 88 《1 生活 类 书籍 出 版 </14> 
33 font-fanily:Helvetice, sans-serif; 89 /ul> 
34 } 99 </nav> 
35 header { /* 设计 header 标 是 区 css */ 9 carticle clagss"col-59 col-s-75"> < 文章 区 
36 backaround-color: aqua; 92 《hly 课 度 学 习 箭 水 穿 石 c/hly 《1-- 建立 第 2 栏 内 容 =- 
37 colon:blue; 93 <p) 致 力 于 最 先进 的 坟 育 ， 综 合 了 书 逢 教材、 教 内、 专业 认证 、 软 件 
cn 94 、 云 广 等 技术 通过 时 新 深度 学 习 方法 ， 人间 全 /p> 
95 《img srce"mybeok jpg” widthe"369"》 《1-- 插入 图 片 “yy 
7 表格 的 ul 样 ics5 */ Wd 
97 cdiv class="col-25 col-s-109"» 
98 《asidey <1-- 侧 边栏 yy 
9 <h2>ssE</h2> 《1-- 建立 第 3 栏 内 容 -> 
pr /* 表格 的 1 性 zcs5 */ lee <p?Silicon Stone Education 国 际 认证 领导 品牌 /py 
round- ; 1e1 <h2>JobExam< /h2> 
Se 102 ;劳动 各、 侈 于 太 训 院 专业 认证 </p》 
48 pedding:5p 163 <h2> 信 息 图 书 </h2> 
49 margin-bottom: Spx; 184 <p? 大 数据 、 物 联网 、 云 技术 、30 动 画 设计 </py> 
50 box-shadow:gray 1px 2px 2px; Wa Ah 
5 ) 186 cjdivy 
52 -menu 1i:hover { 187 </div> < 中 央 字 耻 区 块 来 浅 > 
53 background-color: darkblue; /” Wi 称 至 表格 区 渤 项 背景 色 */ 168 “footery 
54 ] 189 。 <“p? 台 北市 中 山区 南京 东 路 二 段 98 号 BF 之 1c/p> 
55 aside { 7 aside 区 的 css "/ 110 «¢/footer> 
56 background-color: deepskyblue; M1 ¢/body> 
57 color:white; 112 </html> 


习题 

1. 请 为 这 本 书 第 一 篇 HTML 部 分 设计 一 个 网 页 ， 请 自行 发 挥 创意 。 

2. 请 为 这 本 书 第 二 篇 CSS 部 分 设计 一 个 网 页 ， 请 自行 发 挥 创意 。 

3. 请 参考 ch24_3.html， 设 计 自己 的 网 页 ， 内 容 请 自行 发 挥 创意 。 

4. 请 基于 响应 式 (RWD) 原理 ， 设 计 自己 的 网 页 ， 内 容 请 自行 发 挥 创意 。 
5. 请 基于 响应 式 原理 ， 设 计 自 己 科 系 的 网 页 ， 内 容 请 自行 发 挥 创意 。 
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JavaScript 的 流程 控制 
JavaScript 的 函数 设计 
浏览 器 对 象 模型 BOM 
HTML 的 文件 对 象 模 型 DOM 
HTML Canvas 绘图 与 动画 
取得 用 户 的 经 纬度 数据 
jQuery Mobile 移动 版 网 页 设计 
将 网 页 转 成 APP 应 用 程序 


JavaScript 基础 知识 


本 章 摘要 

25-1 JavaScript 的 功能 25-6 数据 类 型 

25-2 JavaScript 的 输出 25-7 运算 符 

25-3 ”撰写 JavaScript 代码 的 位 置 25-8 布尔 值 、 比 较 运算 与 逻辑 运算 
25-4 JavaScript 基本 语法 25-9 ”位 运算 符 

25-5 声明 变量 25-10 运算 符 的 优先 级 


JavaScript 最 早 是 由 浏览 器 先驱 Netscape 公司 开发 完成 ， 当 时 曾经 有 好 几 个 类 似 语言 ， 
例如 微软 公司 的 JScript 或 CEnvi 的 ScriptEase， 历 经 了 多 年 的 演变 ，JavaScript 已 经 成 为 
设计 网 页 最 重要 的 脚本 (script) 语言 了 。 

如 果 想 成 为 网 页 设计 工程 师 ， 下 列 3 种 必 学 语言 : 

HTML : 定义 网 页 内 容 。 

CSS : 定义 网 页 编排 。 

JavaScript : 用 程序 定义 网 页 行为 。 

通过 对 先前 内 容 的 学 习 ， 相 信 读 者 已 经 学 会 HTML 和 CSS 了 ， 这 一 章 将 带领 各 位 读者 进 
入 JavaScript 的 世界 。 受 限于 篇 幅 ， 本 书 无 法 完整 说 明 所 有 的 JavaScript 内 容 ， 但 是 本 章 讲 
解 的 精华 内 容 ， 已 经 足够 读者 学 习 更 高 级 的 网 页 设计 知识 了 。 


一 
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| 25-1 | JavaScript 的 功能 


学 会 JavaScript 可 以 实现 下 列 功能 。 


口 ”更 改 HTML 元 素 内 容 。 口 更 改 CSS 属性 内 容 。 
口 、 更 改 HTML 元 素 属性 内 容 。 口 “隐藏 或 显示 HTML 元 素 。 


| 25-2 | JavaScript 的 输出 


学 习 程序 语言 最 重要 的 方法 是 实践 ， 由 实例 中 体会 ， 所 以 本 章 将 先 介绍 JavaScript 的 常用 输出 
方法 ， 后 续 各 节 笔 者 将 以 实例 方式 引导 读者 学 习 JavaScript 的 语法 。 有 几 种 简单 的 方法 执行 输出 操 
作 ， 以 便 读 者 验证 学 习 内 容 。 

口 ”使 用 window.alert() 函数 

本 书 第 10-3 节 已 有 说 明 ， 执 行 时 会 出 现 对 话 框 。 

口 “ 存 取 HTML 元 素 内 容 


这 也 是 本 章 会 用 得 很 频繁 的 方法 ， 首 先是 建立 一 个 空 的 HTML 元 素 识 别 ， 然 后 将 程序 执行 结果 
写 入 这 个 空 的 HTML 元 素 内 。 存 取 HTML 元 素 须 使 用 下 列 语句 : 

document .getElementBYID (id) .innerHTML 

这 些 初 看 很 复杂 ， 不 要 慌 ， 笔 者 刚 学 习 JavaScript 时 也 是 一 看 到 上 述 语句 就 想 放弃 。 它 们 其 实 
很 简单 ， 整 段 拆 解 如 下 : 


document .getElementByID (id) 


上 述 是 存 取 HTML 元 素 的 方法 ， 其 中 id 定义 HTML 元 素 。 


innerHTML 


innerHTML 则 表示 元 素 内 容 ， 可 在 此 设 定 HTML 的 内 容 ， 或 是 称 将 程序 的 执行 结果 放 在 此 ， 下 
一 节 起 会 用 大 量 的 实例 说 明 。 
口 ”使 用 document.write() 函数 

将 要 输出 的 数据 写 在 这 个 函数 内 ， 下 一 节 会 用 实例 说 明 。 


| 25-3 撰写 JavaScript 代码 的 位 置 


10-3 节 已 经 说 过 JavaScript 代码 需 放 在 <scripf> 元 素 内 。 一 个 HIML 文 件 是 可 以 有 许多 
<script>，<script> 可 以 放 在 <head> 或 是 <body> 元 素 内 ， 当 然 也 允许 同时 将 <script> 放 在 <head> 和 
<body> 元 素 内 。 


HTML5+CSS3 王者 归来 


25-3-1 将 JavaScript 代码 写 在 <head> 元 素 内 
在 说 明 本 实例 前 ， 笔 者 先 介绍 一 个 新 的 HTML 元 素 <button>， 这 个 元 素 可 以 建立 一个 通用 按 


钮 ， 它 的 使 用 格式 如 下 : 

<button type="value"> … </button> 
口 type 

可 以 是 下 列 值 。 


submit : 默认 值 ， 即 传送 按钮 。 
reset : 重 设 按钮 。 
button : 通用 按钮 。 


设计 程序 时 ， 可 以 将 元 素 内容 设 为 按钮 名 称 。 


程序 实例 ch25_1.html : 这 个 程序 执行 时 显示 “HIML5+CSS3” 单 击 OK 按钮 后 ， 将 改 成 显示 


“JavaScript”。 程 序 第 14 行 设 定 按钮 名 称 是 OK。 


1 <!doctype html> 
2 <html> 

3 <head> 

4 <neta charset="utf-8"> 

5 <title>ch25_1.htnl</title> 

6 <script> 

7 function exFun( ) { 

8 document ,getELementById("ex") ,innerHTML = "JavaScript"; 
9 

10 。 </script> 

11 </head> 

12 <body> 

13 <p id="ex">HTMLS+CSS3</p> 

14 <button type="button" onclick="exFun( )">0K</button> 

15 </body> 

16 </html> 


下 方 左 图 是 程序 执行 的 初始 画 
面 ， 按 OK 按钮 后 将 看 到 下 方 右 图 的 结果 。 


JavaScript 


ra 


HIML 5+CSS3 


本 程序 执行 之 初 ， 会 先 显示 第 13 行 内 容 “HTML5+CSS3” 这 个 HTML 元 素 <p> 的 id 是 
“ex”， 程 序 第 14 行内 容 是 显示 OK 钮 ， 当 单 击 OK 按钮 后 ， 会 调用 第 8 行 的 exFun() 函数 ， 这 个 函 
数 主要 是 将 id 是 “ex” 的 HTML 元 素 内 容 改 为 “JavaScript”， 所 以 单 击 OK 按钮 后 ， 可 以 得 到 显示 


JavaScript 字符 串 。 


25-3-2 将 JavaScript 代码 写 在 <body> 元 素 内 


程序 实例 ch25_2.html : 重新 设计 ch25_1.html， 将 <script> 元 素 写 在 <body> 元 素 内 。 


1 <!doctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch25 2.html</title> 

6 </head> 

7 <body> 

8 <p id="ex">HTML5+CSS3</p> 

9 <button type="button" onclick="exFun( )">0K</button> 
10 <script> 

11 function exFun( ) { 

12 document.getELementById("ex") .innerHTML = “JavaScript"; 
13 

14 </script> 

15 </body> 

16 </htmt> 


与 ch25_1.html 相同 。 
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25-3-3 ”以 外 部 文件 方式 撰写 JavaScript 代码 


JavaScript 程序 以 外 部 文件 的 形式 存在 是 有 下 列 好 处 的 : 
口 HTML 和 JavaScript 皆 容 易 阅读 ， 同 时 也 容易 维护 。 
口 ”JavaScript 文件 存 入 高 速 内 存 (cache)， 可 以 增 快 网 页 下 载 速度 。 
JavaScript 以 外 部 文件 存在 时 , 它 的 扩展 名 是 “js”， 在 HTML 内 的 <script> 调用 独立 的 


JavaScript 文件 方法 如 下 : 
<script src="URL"> … </script> 
可 参考 下 列 实例 。 
程序 实例 ch25_3.html : 重新 设计 ch25_1.html， 以 外 部 文件 方式 撰写 JavaScript 程序 。 


1 <!doctype html> exScript.js 


ee 1 function exFun( ) { 
document .getElementById("ex"). innerHTML = "JavaScript"; 


3 <head> 2 
4 <meta charset="utf-8"> 3} 

5 <title>ch25_3.html</title> 

6 </head> 

7 <body> i 和 让 芒 与 ch25_ 1.html 相同 。 


8 <p id="ex">HTML5+CSS3</p> 
9 <button type="button" onclick="exFun( )">0K</button> 


19 <script src="exScript.js"></script> 
11 </body> 
12 </html> 


25-3-4 存 取 HTML 内 容 输出 的 实例 


在 25-2 节 笔 者 说 可 以 利用 存 取 HTML 元 素 内 容 获 得 输出 结果 ， 下 面 举 一 个 实例 。 
程序 实例 ch25_4.html : 基本 输出 的 应 用 。 这 个 程序 的 要 点 是 在 第 9 行 建立 了 一 个 HIML 元 素 


<p>， 此 元 素 的 id 是 “ex”， 然 后 将 100 放 在 此 元 素 内 。 


1 <ldoctype html> 执行 结果 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 1 的 应 
5 <title>ch25 4.html</title> 简单 输出 的 应 用 
5 </head> 100 


7 <body> 
8 <p> 简 单 输出 的 应 用 </p> 
9 <p id="ex"></p> 


18 <script> 
11 document.getElementById("ex").innerHTML = 199; 


12 </script> 
13 </body> 
14 </html> 


25-3-5 document.write() 输出 的 实例 


这 个 方法 一 般 只 做 为 测试 程序 输出 之 用 ， 因 为 当 网 页 下 载 完成 后 ， 如 果 使 用 这 种 方法 ， 将 造成 


先前 的 网 页 内 容 被 删除 ，ch25_6.html 会 以 实例 做 说 明 。 
程序 实例 ch25_5.html : 使 用 document.write( 重新 设计 ch25_4.html。 


HTML5+CSS3 王者 归来 


<ldoctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>ch25 5.html</title> 

</head> 

<body> 

《p> 简单 输出 的 应 用 </p> 


<script> 


DoNamwmhswnP 


18 document -write(166); 
11 </script> 

12 </body> 

13 </html> 


与 ch25_4.html 相同 。 


程序 实例 ch25_6.html : 测试 网 页 下 载 完成 后 ， 先 前 网 页 内 容 被 删除 的 实例 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>ch25 6.html</title> 
6 </head> 

7 <body> 

3 《p> 简单 输出 的 应 用 </p> 

于 

19 《/body> 

11 </html> 


下 图 所 示 为 单 击 OK 


按钮 后 ， 原 先 页 面 数 据 被 删除 的 效果 。 


简单 输出 的 应 用 


Lex] 


<button type="button”onclick="document .write(199)">OK</button> | 


100 


| 25-4 | JavaScript 基本 语法 


口 ”使 用 等 号 “=” 设 定 值 


x = 5;  // 将 x 设 为 5 
口 ”忽略 空格 符 ， 下 列表 述 意 义 是 相同 的 
X=57 
或 
X= 57 
或 
X= 57 


口 ”使 用 var 声明 变量 


Var x;? // 声明 x 是 变量 

或 

var x = 5; // 声明 变量 时 顺便 为 变量 赋值 
口 ”每 行 语句 以 分 号 结尾 

= 37 

ee 


z=x+y; 


口 ”程序 批 注 方式 

可 以 使 用 “//” 符 号 ， 凡 是 此 符号 后 面 的 同 
行 数据 皆 是 批注 ; 或 是 “/*” 与 “*/” 之 间 的 也 
都 是 批注 。 例 如 : 


var x = 57 


// 声明 变量 时 顺便 为 变量 赋值 


上 述 “ /声明 变量 时 顺便 为 变量 赋值 ”是 
批注 。 


口 ”字符 串 可 以 用 单 引号 或 双 引号 标 引 ， 两 者 意 
义 相同 


X= UK Hung'" 


第 25 章 JavaScript 基础 知识 


程序 实例 ch25_7.html : 简单 执行 算数 的 应 用 。 


<ldoctype html> 工 疆 
<html> 执行 结果 


<head> 
<meta charset="utf-8"> 


> 
2 
3 
4 
5 <title>ch25 7.html</title> 简单 输出 的 应 用 
6 
2 
8 


</head> 
<body> 
<p> 简 单 输出 的 应 用 </p> 30 
9 <p id="ex"></p> 
16 <script> Eee Eee 
11 var x = 10; 
12 vary=x+29 
13 document.getElementById("ex").innerHTML = y; 
14 </script> 
15 </body> 
16 </html> 


程序 实例 ch25_8.html : 字符 串 输出 ， 单 引号 与 双 引 号 皆 可 产生 字符 串 输出 结果 。 


1 <ldoctype html> 5 

2 <html> 执行 结果 

3 <head> 

4 <meta charset="utf-8"> 

: Ht 简单 输出 的 应 用 
7 xbody> 

8 “py 简单 输出 的 应 用 </p> IK Hung 


9 xp id="ex1l"></p> 

19 <p id="ex2"></p> 

11 <script> JK Hung 
12 var myNamel = "]JK Hung"; ”// 使 用 双 引 号 

13 var myName2 = 'JK Hung'; ”// 使 用 单 引号 

14 document.getElementById("ex1").innerHTML = myNamel; 
15 document.getElementById("ex2").innerHTML = myName2; 
16 </script> 

17 </body> 

18 </html> 


| 25-5 声明 变量 


JavaScript 允许 变量 在 使 用 前 不 用 声明 ， 不 过 笔者 不 鼓励 如 此 。 建 议 使 用 前 用 var 声明 变量 。 
JavaScript 是 动态 型 的 程序 语言 ， 声 明 变量 时 不 用 声明 变量 的 数据 类 型 ，JavaScript 可 以 由 程序 内 容 
自动 判别 变量 的 数据 类 型 。 变 量 的 命名 规则 如 下 : 

口 ”必须 由 英文 字母 或 _( 底线 ) 或 $ 开头 ， 建 议 使 用 英文 字母 。 
口 “” 英 文字 母 大 小 写 是 敏感 的 ， 例 如 Name 与 name 被 视 为 不 同 的 变量 名 称 。 
口 ” 保 留 字 ( 可 参考 下 表 ) 不 可 当 作 变量 名 称 。 


abstract arguments await boolean break byte case 
catch char class const continue debugger default 
delete do double else enum eval export 
extends false final finally float for function 
goto 下 implements import in instanceof int 


interface let long native new null package 


HTML5+CSS3 王者 归来 


Private protected public return short static super 
switch synchronized this throw throws transient true 
try typeof Var void vilatile while with 
yield 


在 声明 变量 时 ，JavaScript 可 以 一 行 声明 多 个 变量 ， 彼 此 间 用 逗号 隔 开 。 
程序 实例 ch25_9.html : 重新 设计 ch25_8.html， 但 是 程序 第 12 行 一 次 声明 ， 两 个 变量 。 


2 二 
di aE 生起; 和 与 ch25_8.html 相同 。 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch25 9.html</title> 
6 </head> 
7 <body> 
8 <p» 简 单 输出 的 应 用 </p> 
9 <p id="ex1"></p> 
19 <p id="ex2"></p> 
11 <script> 
12 var myNamel = "JK Hung", myName2 = 'JK Hung'; 
13 document.getElementById("ex1").innerHTML = myNamel; 
14 document.getElementById("ex2").innerHTML = myName2; 
15 </script> 
16 </body> 
17 </html> 


| 25-6 数据 类 型 


JavaScript 的 主要 功能 并 不 是 执行 数学 运算 ， 因 此 对 于 数据 的 声明 并 不 强烈 要 求 ， 甚 至 在 运算 过 
程 中 声明 的 数据 都 是 可 以 转换 类 型 的 。 常 用 的 数据 类 型 一 般 可 分 成 下 列 3 种 : 


口 数值 (number) 口 “ 字 符 串 (string) 口 “ 对 象 (object) 


25-6-1 数值 数据 


当 我 们 在 声明 数值 数据 时 ， 虽 然 有 的 数值 有 小 数 点 ， 有 的 没有 小 数 点 ， 但 是 所 有 的 数值 数据 皆 是 双 
倍 精度 浮 点 数 〈double 格式 )， 系 统 以 64 位 储存 数值 。 值 的 范围 是 -21024 ~ 21024 或 是 -10307 ~10307。 
JavaScript 接受 八进制 与 十 六 进 制 表示 方法 ， 如 果 数 值 以 0x 开始 代表 十 六 进 制 ， 如 果 数 值 以 0 


开始 代表 八进制 。 
程序 实例 ch25_10.html : 数值 输出 的 应 用 。 


<“!doctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>ch25_18.html</title> 

</head> 

<body> 

《p> 简单 输出 的 应 用 </p> 

<p id="ex"></p> 

<script> 


SONAMpPWNp 


第 25 章 JavaScript 基础 知识 


11 varxl=55 // 声明 变量 不 含 小 数 点 行 

12 var x2 = 16.5; // 声明 变量 含 小 数 点 执行 结果 

13 var x3 = 911; /7 声明 八进制 数值 

14 var x4 = 9x11; // 声明 十 六 进 制 数值 尚 单 输出 的 应 用 
15 document.getElementById("ex").innerHTML = xl + "<br>" + x2 + 

16 “<br2" + x3 + "<br>" + x4; 5 

17 </script> a 

18 </body> 地 

19 </html> 


对 上 述 程序 而 言 ， 读 者 须 留意 的 是 第 15 行 和 第 16 行 ， 这 是 一 条 语句 但 是 分 成 2 行 撰写 ， 碰 上 
这 类 情形 最 好 是 在 操作 数 后 ， 本 例 是 “+”， 再 将 语句 内 容 写 到 下 一 行 。 同 时 ， 笔 者 使 用 <br> 符号 将 
数据 分 行 输出 。 


25-6-2 字符 串 数据 


在 单 引号 或 是 双 引 号 内 的 字母 、 数 字 或 句子 皆 称 字符 串 。 如 果 字 符 串 内 有 单 引号 或 双 引号 ， 可 
以 在 左边 加 上 反 斜 体 “/” 注 明 ， 如 果 字 符 串 内 有 反 斜 线 就 再 加 上 一 个 反 斜 线 。 例 如 : 


/" 代表 单 引号 
/" 代表 双 引 号 
// ”代表 反 斜 线 


在 程序 设计 时 ， 又 将 有 反 斜 杠 的 字符 称 转 义 字符 (escape character)。 下 列 是 常见 的 转 义 字符 : 
/b 代表 Backspace 

/£ ”代表 换行 Form Feed 

/n 代表 Line Feed 

/t 代表 Tab 


/r 代表 carriage Return 


程序 实例 ch25_11.html : 字符 串 输出 的 应 用 。 


1 <ldoctype html> FE 
2 <htnl> 执行 结果 


3 <head> 
4 ‘<meta charset="utf-8"> 
5 <title>ch25 11.htnl</title> 
fh 简单 输出 的 应 用 
7 <bod, 
te Ming-Chi Institute of Technology 


3 《p> 简单 输出 的 应 用 </p> 

9 <p id="ex"></p> 

19 <script> 

11 var strl = "Ming-Chi Institute of Technology” 

12 var str2 = "One of the \“Top\" Schools in Taiwan” 

13 document.getElenentById("ex").innerHIML = strl + "<br>" + = tr2; 
14 </script> 

15 </body> 

16 </html> 


25-6-3 ”对 象 数据 


JavaScript 的 对 象 数据 声明 须 使 用 大 括号 “{ … }”， 对 和 象 属性 需 用 冒号 “:” 隔 开 属 性 与 属性 
值 ， 当 对 象 同 时 有 许多 属性 时 ， 彼 此 用 “,” 隔 开 。 下 列 是 对 象 声 明 的 实例 : 

Var student = { firstName:"Peter", lastName:"Hung", id:1234 }; 
程序 实例 ch25_12.html : 声明 对 象 与 打印 对 象 的 应 用 。 这 个 程序 在 第 11~15 行 声明 student 对 象 ， 
然后 在 第 16~17 行 设 定 输出 此 对 象 。 


One of the "Top" Schools in Taiwan 


HTML5+CSS3 王者 归来 


1 <ldoctype html> 18 </scripty 
2 <html> 19 </body> 
3 <head> 28 </html> 
4 <meta charset="utf-8"> 


要 <title>ch25 12.html</title> 
6 </head> 4 二 寻 
5 执行 结果 


3 <p> 简 单 输出 的 应 用 </p> 
9 <p id="ex">/p> 


18 <script> Pe 
i 简单 输出 的 应 用 

12 firsthame:"Peter"， 

13 lastName:"Hung"， Peter Hung 的 id 是 1234 
14 id:1234 

15 BB 

16 ~ document.getElementById("ex").innerHTML = student.firstlame + 

17 " "+ student.lastName + "的 id 是 "+ student.id; 


上 述 程序 笔者 使 用 下 列 方式 存 取 对 和 象 : 
Student .lastName 

JavaScript 也 允许 使 用 下 列 方式 存 取 对 象 。 
student["lastName"]; 


程序 实例 ch25_12_1.html : 使 用 不 同 的 存 取 对 象 属性 方式 重新 设计 ch25_12.html。 
16 。 document.getELementById("ex") ,innerHTML = student.firstNane + 与 ch25 12 html 相同 。 


17 " "+ student["lastName"] + "的 id 是 " + student["id"]; 
25-6-4 综合 应 用 


JavaScript 允许 数值 型 数据 与 字符 串 相 加 ， 结 果 变 成 一 个 字符 串 。 之 前 曾 介绍 JavaScript 的 数据 
类 型 在 运算 过 程 是 可 以 转换 的 ， 参 考 下 面 的 实例 。 
程序 实例 ch25_13.html : 这 个 程序 将 数值 型 数据 与 字符 串 相 加 ， 结 果 将 数值 型 变量 改变 数据 类 


型 ， 成 为 字符 型 数据 。 
1 «ldoctype haly 经 上 述 执行 后 ， 原 先 x 数值 


2 <html> 

ee 变量 成 了 字符 串 变量 。 
4 <meta charset="utf-8"> 

号 <title>ch25_13.html</title> 


a 简单 输出 的 应 用 
7 <body> 

8 《p> 简单 输出 的 应 用 </p> > 

9 <p id="ex"></p> 10JavaScript 

19 <script> 


1 varx=1l9; 

12 var y = "JavaScript"; 

13 var x =x+y; 

14 document.getElementById("ex").innerHTML = xj 
15 </script> 

16 </body> 

17 </html> 


| 25-7 | 运算 符 


先前 实例 已 经 使 用 了 一 些 简单 的 运算 了 ， 这 一 节 会 将 所 有 JavaScript 的 运算 做 一 个 完整 的 说 明 。 
通常 我 们 将 运算 的 符号 称 运算 符 〈operator)， 运 算 的 元 素 称 操作 数 (operand)。 例 如 :“x + y”， 基 
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本 概念 如 下 : 


operand operator operand 


x 和 y 是 操作 数 ，+ 符号 是 运算 符 。 
25-7-1 算术 运算 符 


JavaScript 的 算术 运算 符 有 下 列 几 种 : 

+ ”加 法 , 例如 x=9+3， 即 将 9 加 3 结果 12 放 入 x。 

- ”减法 , 例如 x=9-3， 即 将 9 减 3 结果 6 放 入 x。 

* ”乘法 , 例如 x=9*3， 即 将 9 乘 以 3 结果 27 放 入 x。 

/ ”除法 ,例如 x=a/b， 即 将 9 除 以 3 结果 3 放 入 x。 

% ” 求 余数 ,例如 x=a%b， 即 将 9 除 以 3 余数 0 放 入 x。 
程序 实例 ch25_14.html : 基本 算术 运算 。 


1 <ldoctype html> 二 疆 
Fs 执行 结果 


3 <head> ST | 
4 <meta charset="utf-8"> sr 
5 <title>ch25 14.html</title> 简单 输出 的 应 用 

6 </head> 

7 <body> 27 

8 <p>» 简 单 输出 的 应 用 </p> 3 


9 <p id="ex"></p> 
19 <script> 

11 varx=9; 

12 vary=3; 

13 var zl =x*y; 

14 var z2=x/y; 

15 var z3 =x%y; 

16 ~ document.getElementById("ex") .innerHTML = zl + "Kbry” + z2 + "<br>" + 23; 
17 </scripty 

18 </body> 

19 </html> 


25-7-2 递增 、 道 减 运算 符 
“++” 是 递增 运算 符 ,“--” 是 递 碱 运算 符 。 递 增 、 递 减 运算 符 可 以 放 在 操作 数 的 左边 或 右边 ， 
当 放 在 操作 数 的 左边 时 ， 操 作 数 先 执行 递增 〈 或 递减 ) 运算 完成 再 执行 原先 的 运算 ; 当 放 在 操作 数 


的 右边 时 ， 先 执行 运算 ， 完 成 后 再 执行 原先 的 递增 (或 递减 ) 运算 。 
程序 实例 ch25_15.html : 递增 时 操作 数 在 左边 的 实例 。 


2 <html> 执行 结果 


0 


3 <head> 

4 ‘<meta charset="utf-8"> 由 的 应 
5 <titleych25_15.htmlc/titley 简单 输出 的 应 用 
6 </head> 和 

7 <body> > 


8 “p> 简 单 输出 的 应 用 </p> 


9 <p id="ex"></p> 


19 <script> 

11 vari=1; 

12 varx= 3 

13 vary = x+ ++i; 


14 document.getElementById("ex").innerHTML = y + "<br>" + 让 
15 </script> 

16 </body> 

17 </html> 


HTML5+CSS3 王者 归来 


程序 实例 ch25_16.html : 递增 时 操作 数 在 右边 的 实例 。 


1 <ldoctype html> 4 一 疆 

2 <html> 执行 结果 
3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch25_16.html</title> 简单 输出 的 应 用 
6 </head> 

7 <body> 到 

《py 简单 输出 的 应 用 </pP> 

9 xp id="ex"></p> 

18 <script> 

11 vari=1; 

12 varx=3; 

13 ovary = x + itt; 

14 document.getElementById("ex").innerHTHL = y + "cbr>" + i; 

15 </script> 

16 </body> 

17 </html> 


25-7-3 赋值 运算 符 
常见 的 赋值 运算 符 如 下 表 所 示 : 


实 全 
二 | a+=b | a=a+b 
一 | a 一 b | a=a-b 
水 二 | 区 | a=a*b 
广 a/=b a=a/b 
%= a%=b a=a%b 

程序 实例 ch25_17.html : 赋值 运算 符 的 应 用 。 

4 cone Nm 执行 结果 

3 <head> 

4 <meta charset="utf-8"> oe 

5 <title>ch25_17.html</title> 简单 输出 的 应 用 
6 </head> 

7 <body> 20 

3 《p> 简单 输出 的 应 用 </p> 4 


9 <p id="ex"></p> 


19 <script> 
11 ver al - 10; 

12 var bl = 2; 

13 var 32 = 20; 

14 var b2=5; 

15 al *= bl; 

16 -a2 /= b2; 

17 document.getElementById("ex").innerHTML = al + "<br>" + a25 
18 </script> 

19 </body> 

28 </htnl> 


| 25-8 | 布尔 值 、 比 较 运 算 与 逻辑 运算 


25-8-1 布尔 值 
在 设计 程序 流程 控制 时 ， 会 用 到 布尔 值 的 概念 。 布 尔 值 (boolean) 只 有 两 种 ， 一 种 是 true， 另 
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一 种 是 false。 在 运算 过 程 中 ， 如 果 将 布尔 型 数据 转换 成 数值 型 数据 时 ，true 会 被 转换 成 1，false 
会 被 转换 成 0 ; 但 是 如 果 将 数值 型 数据 转换 成 布尔 值 时 ， 非 0 数据 会 被 转换 成 rue，0 会 被 转换 


成 false。 
程序 实例 ch25_18.html : 布尔 值 的 应 用 。 


1 <ldoctype html> 执行 结果 


2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
出 的 应 
5 <title>ch25 18.html</title> 简单 输出 的 应 用 
6 </head> 二 
false 


7 <body> 

3 《p> 简单 输出 的 应 用 </p> 

9 <p id="ex"></p> 

19 <script> 

11 var x = true; 

12 var y = false; 

13 document .getElementById("ex") -innerHTML = x + "<br>" + y; 


14 </script> 


15 </body> 
16 </html> 


25-8-2 比较 运算 符 


JavaScript 的 比较 运算 符 有 下 列 几 种 ， 如 果 比 较 结果 是 真 ， 则 返回 tue， 如 果 是 伪 ， 则 返回 false。 
> “大 于 ， 例 如 18 > 9， 返 回 tue，8 > 9， 则 返回 false。 
< 小于， 例如 18 <9， 返 回 false，8 < 9， 则 返回 true。 
>= “大 于 或 等 于 ， 例 如 18 >= 18， 返 回 true。 
<= “小 于 或 等 于 ， 例 如 18 <= 18， 返 回 true。 
== 等于， 例如 false == 0， 返回 tue，1 ="1" ， 则 返回 true。 
=== 等 于 且 是 相同 类 型 ， 例 如 1= "1" ， 返 回 false。 
!= 不 等 于 ， 例 如 "x" !="X"， 返 回 true。 
!== 值 不 等 于 或 不 同类 型 ， 例 如 1 = "1" ， 返 回 false。 
程序 实例 ch25_19.html : 比较 运算 符 的 应 用 。 


1 <ldoctype html> 执行 结果 


2 <html> 
3 <head> 
4 <meta charset="utf-8"> 

5 <title>ch25 19.html</title> 简单 输出 的 应 用 


6 </head> 

7 <body> tme 
8 “<p> 简 单 输出 的 应 用 </p> 

9 <p id="ex"></p> 

19 <script> 

11 varx= 1 

12 vary= "1"; 

13 document .getElementById("ex").innerHTML = (x == y); 
14 </script> 

15 </body> 

16 </html> 


程序 实例 ch25_20.html: 重新 设计 ch25_19.html， 这 个 程序 只 更 改 了 原 程序 第 13 行 的 比较 运算 符 。 


13 。 document.getEtementById("ex") ,innerHTML = (x === y); 执行 结果 


简单 输出 的 应 用 
false 
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25-8-3 逻辑 运算 符 
JavaScript 的 逻辑 运算 符 有 3 个 : 


口 && :相当 于 and ( 与 ) 运算 ， 可 参考 下 表 。 口 :相当 于 or (或 ) 运算 ， 可 参考 下 表 。 
&& 运算 结果 | 运算 结果 


false false | false false false false 
false true | false false true | true 
true false | false true false | true 
true true | true true true | true 


口 ! : 相当 于 not ( 非 ) 运算 ， 如 果 是 true 则 传 回 false， 如 果 是 false 则 传 回 true。 
程序 实例 ch25_21.html : && 逻辑 运算 符 的 应 用 。 


<ldoctype html> 执行 结 


1 
2 <htnl> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch25 21.htnl</title> 
6 

这 

日 


简单 输出 的 应 用 
</head> 
<body> 
《p> 简单 输出 的 应 用 </p> NR 

9 <p id="ex1"></p> 

10 <p id="ex2"></p> falsc&é: true ~ false 

11 <p id="ex3"></p> 

12 <¢p id="ex4"></p> falsek&e false= false 四 

13 <script> 

14 var a = true; 

15 varb = folse; 

16 ~ document.getElementById("ex1").innerHTML = "true && true = " + (a 8& a); 

17 document.getElementById("ex2").innerHTML = "true 8&& false= "+ (a && b); 

19 document.getElementById("ex3").innerHTHL - "falseg& true =- "+ (b 88 a); 

19 document.getElementById("ex4").innerHTML = "false&& false= ”+ (b && b); 

20 </script> 

21 </body> 

22 </html> 


true && true = true 


程序 实例 ch25_22.html : || 逻辑 运算 符 的 应 用 。 


<ldoctype html> 
<html> 
<head> 


1 
2 
3 
4 <meta charset="utf-8"> 简单 输出 的 应 用 “^ 
5 
6 
7 
8 


<title>ch25_22.htnl</title> 
</head> true ||true =true 
<body> 

<p) 简 单 输出 的 应 用 </p> true | false= true 
ex1"></p> 

ex2"></p> false | true = true 


12 <p id="ex4"></p> false | false— false 


13 <script> 

14 var a = true; 

15 var b = false; 

16 ~ document.getElementById("ex1").innerHIML - "true || true = " + (a || a); 
17 。 document.getElementById("ex2") .innerHTML = "true || false= " + (a || b); 
18 。 document.getElementById("ex3") .innerHTML = "false || true = " + (b || a); 
19 document.getElementById("ex4") .innerHTML = "false || false= " + (b || b); 
28 </script> 

21 </body> 

22 </html> 


程序 实例 ch25_23.html : ! 逻辑 运算 符 的 应 用 。 


1 <ldoctype htnl> 
2 <html> 

3 ¢head> 

4 cmeta charset="utf-8"> 

5 <titleych25 23.html</title> 

6 </head> 

7 xbodyy 

3 《py 简单 输出 的 应 用 </p> 

9 xp id="ex1"><¢/p> 

18 <p id="ex2">c/py 

11 ¢seript> 

12 var a = true; 

13 varb = false; 

14 docunent.getElementById("ex1").innerHTML 
15 docunent.getElementById("ex2").innerHTML 
16 </script> 

17 </body> 

18 <C/htnl> 


Hfalse= "+ ( 1b); 
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简单 输出 的 应 用 加 
!true= false | 
!false= true 


25-9 位 运算 符 


JavaScript 的 位 运算 符 可 以 针对 位 执行 运算 ， 参 见 下 表 。 
位 运算 符 及 运算 结果 


表达 式 


意义 
& 


0101 & 0001 


0101 | 0001 
0101^0001 


~0101 


0101 << 1 
0101 >> 1 


>>> 


位 无 号 位 移 


0101 >>>1 


程序 实例 ch25_24.html : 位 运算 符 的 应 用 。 


1 cldoctype htnl> 
2 <htnly 

3 khead》 

4 kmeta charset="utf-8"> 

5 <titleychas_24.htmlc/titley 
6 </head> 

7 bodyy 

3 <p> 简 单 输出 的 应 用 </p> 

9 cp id="exlwyc1py 
x2">< /p> 
Brye/py 
ua" >¢ /p> 


16 <script> 
17 vara=5; // el01 


19 docunent.getElenentById("ex1").innerHTML = "a &b 
20 docunent.getElenentById("ex2").innerHTML |b 
21 docunent.getElenentById("ex3").innerHTML ~b 
22 docunent.BetElementById("exd").innerHTML = " ~ 
23 docunent.getElementById("ex5").innerHTML <b= tab 六 
24 document.getElenentById("ex6").innerHIML = "a )>b = "+(a?>b)i 
25 。 document.getElenentByTd("ex7")-innertTML = “a 2> b= "+(a3>b); 
26 sjscript> 

27 </body> 

28 </htnl> 


上 述 程 序 中 ， 


00000000000000000000000000000101 (5) 


经 过 对 ~5 的 计算 得 到 结果 : 


11111111111111111111111111111010 (-6) 


~a 表面 上 是 对 “0101” 的 转换 ， 其 实在 JavaScript 系统 里 的 转换 如 下 : 


告 果 

询 单 输出 的 应 用 % 
a&b=1 

alb=5 

a^b=4 

~a=-6 

a<<b=10 

a>>b=2 


a>>>b=2 ~- 
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在 25-7-3 节 赋 值 运 算 符 的 概念 也 可 以 应 用 在 位 运算 中 。 


运算 符 在 传 运算 中 的 应 用 
&= a 人 =b a=a&b 
= al=b a=alb 
和 a^=b a=a^b 
<<= a<<=b a=a<<b 
>>= a>>=b a=a>>b 
>>>= a>>>=b a=a>>>b 


25-10| 运算 符 的 优先 级 


有 一 个 表达 式 如 下 : 


= be 


从 小 学 数学 可 知 应 先 乘除 后 加 减 ， 所 以 是 先 计 算 bxc， 结 果 再 和 a 相 加 。 这 就 是 所 谓 的 乘法 (9 比 
加 法 (+) 有 较 高 的 执行 顺序 。 下 表 所 示 是 JavaScript 运算 符 的 优先 执行 顺序 ， 优 先 级 由 上 往 下 递减 。 


运算 符 的 优先 级 
而 括号 
()、 new 函数 调用 、 建 立 对 象 
++、--、! 递增 、 递 减 、not 
间 、/、 9 的 、 站 乘 、 除 、 余 数 、 指 数 
加 、 减 
ER 位 左 移 、 右 移 、 无 符号 右 移 
一 、 一 =、!=、! 一 比较 运算 符 的 等 于 或 不 等 于 ( 含 类 型 ) 
R&R& 逻辑 运算 符 and 
I 逻辑 运算 符 or 
二 二 >>=、>>>= 所 有 的 赋值 运算 符 
习题 


1. 请 设计 一 个 JavaScript 程序 ， 当 网 页 下 载 后 ， 输 出 “欢迎 光临 XXX 网 页 ”。XXX 是 你 的 名 字 ， 建 
议 你 为 第 24 章 习 题 3 的 网 页 增加 此 功能 。 


2. 请 设计 100 + 210 的 计算 执行 网 页 ， 并 将 结果 显示 出 来 。 
3. 请 设计 190 % 80 的 计算 执行 网 页 ， 并 将 结果 显示 出 来 。 
4.a 是 5，b 是 8，c 是 10， 请 设计 下 列 程序 : 


(= 


5. 请 用 数值 9 测试 ch25_24.html。 


(b ) a -= ++b 十 c--; 


《ET) 本 一: 


(d) a /二 16+++b ---c 


JavaScript 的 流程 控制 


本 章 摘 要 

26-1 if 语 句 

26-2 switch 语句 
26-3 for 语句 

26-4 ”while 语句 
26-5 do … while 语句 
25-6 ”特殊 表达 式 
26-7 数组 array 
26-8 ”for/in 语句 
26-9 ”综合 应 用 


JavaScript 程序 的 流程 控制 可 以 分 成 两 大 类 : 
判断 (decision) : 例如 if、switch 语句 。 
循环 (loop) : 例如 while、for、do 语句 。 

本 章 将 以 实例 说 明 这 些 概念 。 


HTML5+CSS3 王者 归来 


| 26-1 if 语句 


这 语句 又 可 分 成 好 几 种 状况 ， 下 面 将 一 一 解说 。 
26-1-1 if 语句 
它 的 语法 格式 如 下 : 


if ( condition ) { 
系列 statements; 
} 


如 果 判 断 condition 的 值 是 tue， 则 执行 系列 statements。 如 果 “ 系 列 statements;” 只 有 一 条 语 
可 以 省 略 大 括号 ， 整 个 语法 格式 如 下 : 


if ( confition ) 


国 


statement; 


这 个 概念 可 以 用 在 本 章 后 面 的 表述 中 。 
程序 实例 ch26_1.html : 这 个 程序 执行 时 ， 如 果 随机 数 大 于 0.5 则 输出 Big， 否 则 输出 small。 


1 <ldactype html> /= 

2 chtml> 执行 结果 

3 <head> 

4 <neta charset="utf-8"> 

5 <title>ch26_1.html<c/title> Mathrandom( ) 将 传 回 0 和 1 之 问 的 随机 数 
6 </heady 

7 <body> Random Numberis = 0.06902737681667537 
5 <p>Math.random( ) 将 情 回 gf1 之 间 的 随机 元 <c/p> 

9 xp id-"exley</p》 

19 <p id="ex2">small¢/p> 
11 <script> 

12 Var ranDate; 

13 ranData - Math.random( ); Math.random( ) 将 传 同 0 和 {之 间 的 陋 机 数 
14 docunent.getElenentById("ex1").innerHTML = “Random Number is = ”+ ranData; 

15 if (renDeta > 0.5) { Random Number is = 0.5527864217631131 
16 document . getElementById("ex2").innerHIML = "Big”; 
17 } 

18 </script> 

19 </body> 

29 </html> 


这 个 程序 执行 时 会 先 将 大 小 字段 的 元 素 ex2 内 容 设 为 small， 参 见 第 10 行 。 这 个 程序 使 用 了 
JavaScript 的 随机 函数 Math.random()， 会 返回 0 至 1 间 的 值 。 程 序 第 14 行 是 输出 随机 数 。 程 序 第 
15~17 行 是 判断 ， 如 果 随 机 数 大 于 0.5 则 输出 Big。 


small 


Big 


26-1-2 if … else 语句 
它 的 语法 格式 如 下 : 


if ( condition ) { 
A 系列 statements; // condition 是 true 则 执行 


} else { 
BB 系列 statements; // condition 是 false 则 执行 


} 
如 果 condition 的 判断 值 是 tue， 则 执行 A 系列 statements， 否 则 执行 B 系列 statements。 
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程序 实例 ch26_2.html : 用 本 节 方 法 重新 设计 ch26_1.html。 由 于 其 中 的 判断 是 condition 值 为 伪 时 ， 
可 以 执行 系列 statements， 所 以 可 以 省 略 第 10 行 预先 设 定 大 小 字段 的 元 素 ex2 内 容 为 small。 


1 <ldoctype htnl> 
2 <htnl> 

3 <head> 

4 kmeta charset="utf-a"> 

5 <title>ch26 2.html</title> 
6 </head> 


random( ) 将 传 日 9 和 1 之 间 的 随机 数 </p> 
9 xp id-"ex1"></p> 

19 <p id-"ex2"></p> 

11 <script> 

12 var ranData; 

13 ranData = Nath.randon( ); 


14 。 document.getElementById("exl").innerHTML = "Random Number is = ”+ ranData; 
15 if (ranata > 0.5){ 

16 document getElementById("ex2").innerHTHL = "Big™; 

17 lelse{ 

18 document. getElementById("ex2").innerHTHL = "smell"; 

19 

28 </script> 

21 </body> 

22 </html> 


EE 和 ;车 与 ch26_1.html 类 似 ， 随 机 数 大 于 0.5 时 输出 Big， 否 则 输出 small。 


26-1-3 if … else if … else 语句 


它 的 语法 格式 如 下 : 


if ( conditionl ) { 

A 系列 statements; // conditionl 是 true 则 执行 
} else if ( condition2 ) { 

B 系 列 statements; // condition2 是 true 则 执行 


} else { 
C 系 列 statements; // conditionl 和 condition2 缘 是 false 则 执行 


} 

如 果 判 断 conditionl 的 值 是 te， 则 执行 A 系列 statements ; 否则 检查 condition2， 如 果 判 断 
condition2 的 值 是 true， 执 行 B 系列 statements， 否 则 执行 C 系列 statements。 
程序 实例 ch26_3.html : 这 个 程序 在 执行 时 会 先 获取 目前 时 间 是 几 点 〈Hour) 的 信息 ， 如 果 时 间 是 
小 于 8 点 则 输出 “早上 ” 如 果 是 9 点 至 16 点 则 输出 “中 午 ” 否则 输出 “晚上 ”。 


1 <ldoctype htmly 

2 <html> 

3 <head> 

4 <meta chanset="utf-8"> 
5 <titleych26 3.html¢/title> 

6 </head> 

7 <body> 

8 <p>Date( ) .getHours 将 获得 目前 时 间 是 几 点 的 信息 </p> 
9 cbutton onclick="exFun( )">OKc/buttony 

18 <p id="numHour"></p> 

11 <p id="msg">c/py> 

12 <script> 

3 function exFun( ) { 


14 var timeHour = new Date( ).getHours( );  ”// 获取 目前 几 点 的 信息 
15 docunent .getElenentById( "numHour").innerHTML - "Hours - ”+ timeHour; 
16 if ( tineHour <= 8 ) { 

7 dacunent .getElementById( "msg") -innerHTML = "早上 ™; 

18 } else if ( timetour <= 16 ) { 

19 docunent..getElementById("nsg") .innerHTML = “中 午 "5 

29 } else { 

21 document .getElenentById("msg").innerHTML -= "晚上 "; 

“Rt: 

-4 

24 </script> 

25 </body> 


26 </html> 


HTML5+CSS3 王者 归来 


执行 结果 
| 
Date( ).getHours 将 获得 目前 时 间 是 几 点 的 信息 | Date( ).getHours 将 获得 日 前 时 间 是 几 点 的 信息 
[qx -| eS 
Hours=22 
上 晚上 


上 述 程序 第 14 行 是 获得 时 间 hour 信息 ， 注 意 “new” 不 可 省 略 ， 这 是 在 声明 一 个 对 象 变量 。 
26-1-4 判断 条 件 可 以 扩展 
前 一 节 过 … else 语句 的 使 用 可 以 扩展 ， 例 如 : 


if ( conditionl ) { 

A 系列 statements; // conditionl 是 true 则 执行 
} else if ( condition2 ) { 

BB 系列 statements; // condition2 是 true 则 执行 


// 可 在 此 增加 判断 条 件 


} else { 
C 系 列 statements; // 所 有 的 条 件 皆 是 false 则 执行 


也 就 是 可 以 在 else 前 增加 许多 重 判断 。 


| 26-2 | Switch 语句 


switch 语句 的 语法 格式 如 下 : 
Switch ( expression ) { 
case ValueR: 
A 系列 statements; 
break; 
case valueB: 
B 系列 statements; 
break; 


default: 
其 他 系列 statements; 


} 


上 述 程 序 在 执行 时 ， 会 由 上 往 下 寻找 符合 条 件 的 case， 当 找到 时 JavaScript 会 去 执行 与 该 case 
有 关 的 语句 ， 直 到 碰 到 break 或 是 遇 上 switch 语句 的 结束 符号 ， 才 结束 switch 语句 。 如 果 所 有 条 件 
的 case 皆 不 符合 ， 则 执行 default 下 的 语句 。 
程序 实例 ch26_4.html : 程序 执行 时 单 击 OK 按钮 可 以 判断 今天 星期 几 ， 如 果 是 周 六 或 周 日 则 输出 
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“放假 日 今天 星期 日 (或 六 )” 信 息 的 字符 串 ， 其 他 则 输出 “上 班 日 ”。 


1 xldoctype html> 
2 <html> 

3 <head> 

4 meta charset="utf-8"> 

5 <title>ch26 4.html</title> 

6 </head> 

7 <body> 

8 <p>Date( ).getDay( ) 将 获得 目前 星期 几 的 信息 </p> 
9 <button onclick="exFun( )">Ok</button> 

19 <p id="msg"></p> 


11 <script> 

12 function exFun( ) { 

13 var dayWeek = new Date( ).getDay( );  ”// 获得 目前 星期 几 的 信息 

14 switch ( dayWeek ) { 

15 case 9: 

16 document.getElementById("msg") .innerHTML = "放假 日 今天 是 星期 日 "; 
17 break; 

18 case 6: 

19 document .getElementById("msg") .innerHTML = "放假 日 今天 是 星期 六 "; 
29 breaki 

21 default: 

22 document .getElementById("msg").innerHTML = "上班 日 "; 

23 } 

24 

25 </script> 

26 </body> 

27 </html> 


执 和 


Date( )getDay( ) 将 获得 日 前 星期 儿 的 信息 


[ox 


Dere( geDay( 将 区 每 日 前 是 出 几 的 信息 | 
放假 日 今天 是 蜂 期 六 


上 述 程序 第 13 行 可 以 输出 0~6 的 星期 信息 ，0 代表 周 日 ， 其 他 数字 则 是 星期 几 的 数字 信息 。 
程序 实例 ch26_5.html : 请 用 户 输入 0~6， 如 果 输 入 0 则 输出 星期 日 ， 其 他 数字 则 输出 相对 应 星期 


几 的 信息 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch26_5.html</title> 

6 </head> 

7 <body> 

8 <script> 

9 var numInput = window,prompt(" 请 答 入 数字 6-6"，""); 
16 switch ( Number(numInput) ) { 


11 case 9: 

12 window.alert(" 星 期 日 "); 
13 break; 

14 case 1: 

15 window.alert(" 性 期 一 "); 
16 break; 

a Case 2: 

18 window.alert(" 且 期 二 "); 
19 break; 

20 case 3: 

21 window.alert(" 星 期 三 "); 
22 break; 

23 Case 4: 

24 window.alert(" 导 期 四 "); 
25 break; 

26 Case 5: 

27 window.alert(" 且 期 五 "); 


28 break; 


29 case 6: 

38 window.alert(" 县 期 六 "); 
31 break; 

32 default; 

33 window.alert(" 输 入 错误 "); 
34 } 

35 </script> 

36 </body> 

37 </html> 


下 面 是 程序 在 Chrome 下 的 执行 
结果 。 
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上 述 程序 第 9 行 笔者 使 用 了 window.prompt0 函数 ， 这 个 函数 可 以 输入 两 个 参数 ， 第 一 个 参数 是 
显示 在 对 话 框 内 的 信息 ， 笔 者 输入 是 “请 输入 数字 0~6”， 第 二 个 参数 是 输入 框 默认 的 输入 值 ， 需 留 
意 我 们 在 此 字段 所 输入 的 数据 是 字符 串 数据 ， 所 以 程序 第 10 行 笔者 又 增加 了 Number() 函数 ， 这 个 
函数 会 将 字符 串 数据 转换 成 数值 数据 。 


| 26=3 | for 语句 


这 是 一 个 循环 语句 ， 它 的 语法 格式 如 下 : 

for ( statementl; statement2; statement3; ) { 
系列 statement; 

} 


上 述 statementl 和 statement3 是 普通 的 设 定语 句 ， 
statement2 是 关系 表达 式 。 各 表达 式 功能 是 : 


statement1 


口 _statement1 : 设 定 循环 语句 指标 。 一 ee 
口 statement2 ; 测试 是 否 要 退出 循环 。 ~™ 


口 ”statement3 : 更 新 循环 语句 指标 。 Rlstatement 
右 图 是 for 语句 的 语法 流程 图 : ] 
statement3 


如 流程 图 所 示 ， 系 统 先 执行 statement1， 主 要 目的 是 设 定 循环 语句 指标 。 然 后 执行 statement2， 
statement2 是 条 件 表 达 式 ， 如 果 所 得 是 tue， 则 执行 循环 内 容 statement， 如 果 是 false 则 退出 循环 。 
循环 内 容 执行 完成 后 会 执行 statement3 ，statement3 的 目的 是 更 新 循环 指标 。 然 后 再 进入 statement2 
条 件 表 达 式 ， 判 断 值 是 tue 还 是 false。 
程序 实例 ch26_6.html : for 循环 的 应 用 ， 同 时 列 出 总 和 。 这 个 程序 在 执行 循环 时 ， 会 列 出 循环 指针 

(变量 i) 和 总 和 【变量 sum)。 


1 <ldoctype html> 一 / 士 - 
2 <html> 执行 结 JavaSeript for loop 


3 <head> | 

4 <meta charset="utf-8"> Loop=3, sum ~6 

5 <title>ch26 6.html</title> Tepe 
oop 一 S; Sum 一 14 

6 </head> 

7 <body> 


8 <p>Javascript for loop</p> 

9 <p id="msg"></p> 

19 <script> 

11 var strText = ""; // 定义 字符 种 变量 


12 var 这 // 循环 指标 

1B3 var sum = 0; // 加 总 

14 for(i-liixc=-5i+ ){ 

15 Sum += i; 

16 strText += "Loop =" ++", Sum= "+ SUum+ "<br>"; 


i 
18 document .getElementById("msg”).innerHTML = strText; 
19 </script> 

26 </body> 

21 </html> 
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| 26-4 while 语句 


这 是 一 个 循环 语句 ， 它 的 语法 格式 如 下 : 
while ( condition ) { 

系列 statement; 
. 


上 述 语句 的 语法 是 如 果 判 断 condition 的 值 是 true 则 循环 继 二 
续 ， 如 果 判 断 的 值 是 false， 则 循环 结束 。 这 个 while 循环 可 以 
执行 与 for 语句 相同 的 功能 ， 我 们 可 以 用 下 列表 示 法 ， 说 明 上 
述 语法 格式 。 
statementl1; true 
while ( condition ) { 
系列 statements; at 


3 
右 图 是 该 语句 的 语法 流程 图 : 


程序 实例 ch26_7.html : 重新 设计 ch26_6.html 使 用 while 语句 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch26 7.html</title> 

6 </head> 

7 <body> 

8 <p>Javascript for loop using while</p> 
9 <p id-"msg"></p> 

19 <script> 

11 var strText = ""; // 定义 字符 率 变 量 


12 var i; // 循环 指标 

13 -var sum = 0; 1/ 加 总 

14 while (1 <=5){ 

15 Sum += i 

16 strText 4= "Loop = " +i+", Sum = "+ Sum + "<br>"; 
17 HH 

18 


19 document.BgetElementById("mse").innerHT™ML = strText; 
20 </script> 

21 </bodyy 

22 </html> 


二 与 ch26 6html 相同 。 


| 26-5 | do … while 语句 


这 也 是 一 个 循环 语句 ， 它 的 语法 格式 如 下 : 
do { 
系列 statements; 


} while ( condition ); 


HTML5+CSS3 王者 归来 


do… while 语句 与 while 语句 最 大 的 差别 在 ， 它 是 先 执行 循 本 
环 内 容 ， 然 后 再 判断 condition， 如 果 判 断 值 是 true 循环 继续 ， 如 
果 判 断 值 是 false 则 结束 循环 。 右 图 是 该 语句 的 语法 流程 图 : 
程序 实例 ch26_8.html : 重新 设计 ch26_6.html 使 用 do … while 
语句 。 
1 <ldoctype html> 
2 <html> 
3 <head> false 
4 <meta charset="utf-8"> | 


5 <title>ch26 8.html</title> 
6 </head> 
7 
8 


<body> 

<p>Javascript for loop using do ...while</p> 
9 <p id="msg "></p> 
16 <script> 
11 var strText = ""; // 定义 字符 率 变 量 


12 var i; // 循环 指标 

13 var sum = 8; // 加 总 

14 dof 

15 Sum += 于 

16 strText += "Loop =" ++", SunN= "+ Sum+ "<br>"; 
17 i++ 


18 } while ( i <= 5 ); 

19 document .getElementById("msg”).innerHTML = strText; 
28 </script> 

21 </body> 

22 </html> 


ei 和 上 车 与 ch26 6html 相同 。 


| 26-6 特区 表达 式 


在 这 … else 语句 中 ， 我 们 经 常 可 以 看 到 下 列 语句 形式 : 
让 


C = af; 
} 
else { 
c=b; 


其 实 上 述 语句 是 求 较 大 值 的 运算 ， 首 先 比 较 a 是 否 大 于 b， 如 果 是 ， 则 令 c 等 于 a， 否 则 令 c 等 
于 b。JavaScript 提供 下 面 这 种 特殊 表达 式 ， 可 以 让 我 们 简化 上 述 语句 。 

旺 

它 的 执行 情形 是 ， 如 果 el 为 tue， 则 执行 se2， 否 则 执行 s3。 如 果 我 们 想 求 两 数 的 最 大 值 ， 若 
使 用 这 种 特殊 表达 式 ， 则 其 写法 如 下 : 

c=(a>b}2?2a:b; 


程序 实例 ch26_9.html : 这 个 程序 会 依 目 前 几 点 列 出 目前 是 早上 (12 点 前 ) 或 是 下 午 〈12 点 后 , 含 12 点 )。 


第 26 章 JavaScript 的 流程 控制 


1 xidoctype html> 

2 xhtml> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <title>ch26 9.html</title> 

6 </head> 

7 <body> 

3 <p?Date( ) .BetHours 将 获得 目前 时 间 是 几 点 的 信息 c/py 


13 。 function exFun( ) { 


14 var timeHour = new Date( ).BetHours( );  ”// 获取 目 痢 几 总 的 信息 

15 var txtText; 

16 txtText = ( timeHour > 11 ) ? "下 午 ”: "时 上" 

17 document ,BetElementByTd("numHour") ,innerHTRL = "Hours = ”+ timeHour3 
18 document .getElementById("msg").innerHTML =“ 忱 主 是 ”+ txtText; 

35 

28 </script> 

21 </body> 

22 </html> 


Date( ).getHours 将 获得 目前 时 间 是 几 点 的 信息 


Hours =23 
现在 是 下 午 


| 26-7 数组 array 


数组 是 一 种 结构 化 的 数据 结构 ， 主 要 是 将 相同 类 型 的 数据 集合 起 来 ， 用 一 个 变量 名 称 代表 ， 将 
来 可 以 用 索引 方式 存 取 数 组 内 的 数据 。 建 立 数组 的 语法 如 下 : 


Var arrayName = [datal，data2，… datan]; 


下 面 是 数组 声明 的 方式 : 


var numList = [8, 7, 9]; 


经 过 上 述 声明 后 ， 可 以 知道 这 个 数组 名 是 numList， 共 有 3 条 数据 ， 在 系统 内 数据 储存 方式 如 下 : 


numList[0] = 8; // 数组 的 索引 值 是 从 0 开始 
numList[1] = 7; 
numList[2] = 97 


程序 实例 ch26_10.html : 建立 数组 数据 然后 输出 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch26_10.html</title> numList[0] = 8 
6 

8 


</head> numList[1] =7 
<body> numList[2] =9 
<p id="ex"></p> numList[3] = 2 
9 <script> numList[4] =5 
10 var numList = [8, 7, 9, 2, 5]; 
11 var numArray = ""; 
12 Var 让 
13 for(i=6ii<5; 4 )1{《 
14 numArray += "numList[" + 主 + "] 
15 
16 document .getELementById("ex") .innerHTML = numArray; 
17 </script> 
18 </body> 
19 </html> 


”+ numList[i + "<br>"; 


HTML5+CSS3 王者 归来 


懂 了 上 述 概 念 ， 我 们 可 以 很 容易 地 使 用 该 方法 建立 字符 串 数组 。 
程序 实例 ch26_11.html : 建立 字符 串 数组 并 直接 输出 ， 然 后 循环 处 理 再 输出 一 次 。 


1 <ldoctype htmly 三 疆 
2 xhtml> 执行 结 


3 <head> 
4 <meta charset="utf-8"> 
<title>ch26 11,html</title> 


5 'Drange:Banana 
6 </head> 和 

7 <body> ist[0] = 

日 xp 1d="ex1"></p> eT re 


9 xp id-"ex2"></p> 

19 <script> 

11 var strlist = ["Apple", "Orange”, “aanana"]; 
12 var strArray = ™"; 


strList[2] = Banana 


3 var i 

14 for(i=0i<3it)t 

15 strArray += "strlist[" + i + "] = " + strtist[i] + "<bry"; 
16 } 


document getElementById("ex1") ,innerHTML = strtist;  // 不 数组 

18 document,getElementById("ex2"),innerHTML = strArray; // 请 环 处 至 过 的 教 组 
19 </scripty 

29 </body> 

21 </html> 


26-7-1 Array 的 方法 


JavaScript 有 许多 内 建 的 方法 (method)， 有 了 它 可 以 增强 处 理 数据 的 能 力 ， 其 中 一 个 方法 是 排 
序 ， 可 以 直接 使 用 内 建 的 sort( 方法 ， 获 得 从 小 到 大 的 排序 结果 。 
程序 实例 ch26_12.html : 修改 ch26_10.html， 使 用 sort() 方法 将 排序 好 的 数据 列 出 。 


1 xldoctype html> 二 4 士 
Hpiy 执行 结 

3 <head> 

4 emeta charset="utf-8"> 

5 xtitleych26_12.htmlk/titley numSort[0] =2 
5 </head> numSort[1] =$ 
7 <body> mumsort[2] = 了 
8 <p id="ex"></p> Er 
9 «<script> onsorld] 


19 var numList -= [8, 7, 9, 2, 5]; 

11 var numSort = numList,sort( );  // 使 用 sort( ) 方 法 排序 
12 var numArray = "3 

13 -var i 

14 for(i-0ix<S5in)t{ 

15 numArray += “numSort[" + +"] =" +numsort[i] + “<br>"; 
15 } 

17 document.getElementById("ex") .innerHTML = numArray; 

18 «</script> 

19 <¢/body> 

29 </html> 


26-7-2 Array 的 属性 


length 是 Array 的 长 度 属性 ， 下 列 的 实例 可 以 得 到 Array 数组 的 长 度 。 
var numList = [8, 7, 8, 2, 5]; 
var x = numList.length; // length 是 计算 数组 长 度 属性 


程序 实例 ch26_13.html : 使 用 数组 数据 建立 项 目 列表 数据 。 


1 <ldoctype htmly 
2 <html> 

3 <head> 

4 <meta charset="utf-s"> 

5 <titleych2s 13.html</title> 

6 </head> 

7 <body> 

8 <p> 使 用 JavaScript Array 列 出 项 目 符号 </p> 
9 xp id-"ex"></p> 
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10 <script> 
11 var strtist = (“Apple”, “Orange”, “Banana”]; 

12 var strlen = strList.length; // 区 和 洗 要 组 长 度 
1 var ulText; 

14 var 这 
15 ulText 


ul // 项目 符号 起 始 标记 
16 for (i=0@;i¢ strten; it){ 
2 ulText += "eliy”+ strList[i] + "</1i>"; 


上 
19 ulText 4#= "</ul>" // 项目 符号 绪 束 标记 
20 document,getelementById("ex"),innerHTML = UlText;  ” // 列 出 项 目 符号 
21 xjscripty 
22 </body> 
23 </htnl> 


使 用 JavaScript Array 列 出 项 目 符号 


。 Apple 
。 Orange 


。 Banana 


JavaScript 的 流程 控制 


| 26-8 | for/in 语句 


这 是 用 在 数组 的 循环 语句 ， 可 使 程序 设计 简化 许多 ， 笔 者 以 实例 说 明 。 


程序 实例 ch26_14.html : 使 用 for/in 语句 重新 设计 ch26_10.html， 这 是 一 个 直接 列 出 数组 的 应 用 。 


1 xldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

Es <title>ch26 14.html</title> 

6 </head> 

7 <body> 

8 <p id="ex"></p> 

9 <script> 

10 var numList = [8, 7, 9, 2, 5]; 

11 Var numArray = ""; 

12 var i; 

33 for (iin numList ) { 

14 numArray += “numList[”+ + "] = "+ numList[i] + "<br>"; 
5 和 

16 document .getElementById("ex").innerHTML = numArray; 
17 </script> 

18 </body> 

19 </html> 


执行 结 与 ch26_10.html 相同 。 
这 个 程序 最 重要 的 新 观念 是 下 列 语句 : 


for ( i in numList ) 


执行 第 一 次 循环 时 ，i 会 是 索引 0， 第 二 次 时 i 会 是 索引 1 …… 第 五 次 时 i 会 是 索引 4， 由 于 这 


是 最 后 一 个 循环 ， 所 以 执行 完 后 ， 循 环 自动 结束 。 


HTML5+CSS3 王者 归来 


综合 应 用 


程序 实例 ch26_15.html : 猜 数字 游戏 ， 所 猜 的 数字 是 30 在 第 9 行 ， 使 用 puzzle 当 变量 名 称 。 


1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


5 <title>ch26 15.html</title> 

6 </head> 

7 <body> 

8 <script> 

9 var puzzle = 39; 7/ 设 定数 字 解 答 

19 var numInput = window.prompt(" 请 袖 入 8-56 数 字 ",，""); 
11 dof 

12 if ( Number(numInput) > puzzle ) { 

13 window.alert(" 请 猜 小 一 点 "); 

14 numInput = window.prompt(" 请 输入 69-56 数 字 "，""); 
15 } else { 

16 window.alert(" 请 猜 大 一 点 ") 

17 numInput = window.prompt(" “请 给 入 9- 56 数 字 "，""); 
18 


19 让 EN ( Number(numInput) !== puzzle ) 
20 window.alert(" 苏 喜 ! 答 对 了 "); 

21 </script> 

22 </body> 

23 </html> 


下 列 是 一 系列 本 例 在 Chrome 中 的 执行 结果 图 。 


This page says: 
请 确 入 0-50 答 字 
-一 
OK Cancel 
This page says: This page says 机 
请 清 大 一 点 芍 喜 ! 答对 了 
ok | [Le | 


1. 请 参考 ch26_2.html， 将 程序 改 为 如 果 随 机 数 大 于 0.67 输出 Big， 如 果 小 于 或 等 于 0.67 但 是 大 于 
0.33 输出 medium， 如 果 小 于 或 等 于 0.33 输出 small。 


2. 请 设计 一 个 程序 可 以 将 数据 从 大 排 到 小 ， 下 列 是 排序 前 的 数据 。 
16, 31, 98, 55, 38, 77, 16 
3. 请 参考 ch26 4.html 设计 程序 ， 如 果 当 前 系统 时 间 是 0 列 出 星期 日 ，1~6 分 别 列 出 星期 一 至 星期 六 。 


JavaScript 的 函数 设计 


本 章 摘要 

27-1 ”基本 函数 设计 

27-2 ”设计 一 个 可 以 传递 参数 的 函数 
27-3 ”函数 调用 同时 有 返回 值 
27-4 ”全 局 变量 与 局 部 变量 

27-5 ”函数 被 定义 在 对 象 内 


函数 (function ) 由 一 系列 指令 组 成 ， 它 的 目的 有 两 个 。 

( 1 ) 当 我 们 在 设计 一 个 大 型 程序 时 ， 若 是 能 将 这 个 程序 依 功能 分 割 成 较 小 的 功能 ， 然 后 依 这 
些 较 小 功能 要 求 撰写 程序 ， 则 不 仅 使 程序 简单 化 ， 也 使 最 后 程序 排 错 更 容易 。 

(2 ) 在 一 个 程序 中 ， 也 许 一 些 指令 被 重复 书写 在 不 同 的 地 方 ， 若 是 我 们 能 将 这 些 重复 的 指 
令 撰 写成 一 个 函数 ， 需 要 用 时 再 加 以 调用 ， 如 此 ， 不 仅 减少 编辑 程序 的 时 间 ， 而 且 更 可 使 程序 精 
简 、 清 晰 、 明 了 。 


HTML5+CSS3 王者 归来 


下 面 是 调用 函数 的 基本 流程 图 。 


当 一 个 程序 在 调用 函数 时 ，JavaScript 会 自动 跳 到 被 调用 的 函数 上 执行 工作 ， 执 行 完成 后 ， 再 回 
到 原先 程序 执行 位 置 ， 然 后 继续 执行 下 一 道 指 令 。 

JavaScript 程序 语言 的 功能 与 其 他 高 级 语言 使 用 目的 不 同 ， 因 此 对 于 函数 的 使 用 功能 也 有 它 特殊 
的 名 词 。JavaScript 将 函数 分 为 两 种 。 


口 一 般 函 数 (general function) 
这 种 函数 与 其 他 高 级 语言 的 函数 观念 是 一 样 的 ， 有 的 程序 语言 将 函数 称 作 子 程序 。 
口 ”事件 处 理 函 数 (event function) 


用 户 在 操作 网 页 时 ， 可 能 会 触发 一 些 动 作 ， 针 对 这 些 动作 所 设计 的 事件 处 理 程序 称 事件 处 理 函 
数 。 例 如 ， 用 户 浏览 网 页 ， 网 页 内 容 下 载 后 会 触发 onload 事件 ， 我 们 可 以 针对 此 设计 事件 处 理 程 
序 。 又 例如 ， 用 户 者 浏览 网 页 时 ， 单 击 了 一 下 某 元 素 ， 会 触发 onclick 事件 ， 我 们 也 可 以 针对 此 设计 
事件 处 理 程序 。 

JavaScript 除了 允许 我 们 自行 设计 事件 处 理 函 数 外 ， 也 提供 一 系列 的 内 建 函数 (build in 
function)， 有 些 内 建 函数 是 全 局 内 建 函 数 ， 表 示 所 有 对 象 (object) 皆 可 以 使 用 ， 有 些 内 建 函数 是 适 
用 某 些 特定 对 象 (object)， 在 JavaScript 中 称 这 些 属于 某 对 象 的 内 建 函 数 为 方法 (method)， 例 如 前 
一 章 所 使 用 的 sort(O)。 


| 27-1 | 基本 函数 设计 


函数 的 基本 语法 格式 如 下 : 


function funName (Parameter1l，… , patameterN) { 
系列 statements; 
} 
上 述 函 数 内 的 parameter 是 指 传递 给 函数 的 值 ， 如 果 有 传递 参数 时 ， 所 传递 参数 的 顺序 一 定 不 能 
错误 。 
程序 实例 ch27_1.html : 一 个 简单 没有 传递 参数 ， 也 不 需 返 回 数据 的 函数 设计 。 
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1 <!ldoct html> A 一 
ee FE 下列 是 在 Chrome 中 的 执行 结果 。 
3 <head> 
4 <meta charset="utf-8"> This page says: 

§ <titleych27 1.html</title> 于 入村 

6 <script> [Ee 

了 function welMsg( ) { 

8 var loginName = window.prompt(" 请 输入 账号 "，""); ok Caoncel 

9 window.alert(loginWame +“" 欢 迎 使 用 本 系统 "); 

10 

11 </script> EE 
12 </head> This page says: 

13 <body onload="welMsg( )"> Hngme 和 zs 

14 </body> 

15 </htm> Ee 


池 司 光 设计 一 个 可 以 传递 参数 的 函数 


这 一 节 主 要 是 用 一 个 实例 ， 让 读者 可 以 体会 如 何 将 参数 传递 至 函数 。 
程序 实例 ch27_2.html : 设计 程序 ， 当 单 击 超 链 接 时 ， 会 调用 sumFun() 函数 ， 同 时 分 别 将 参数 
20,30 传 给 x,y。sumFun() 函数 在 执行 运算 后 ， 可 以 得 到 执行 结果 。 


1 《ldoctype html> 下 列 是 在 Chrome 中 的 执行 结果 。 


2 <html> 
3 <head> 
4 <meta charset="utf-8"> PR 
5 <title>ch27 2.html</title> 请 点 选 下 列 公 式 
6 <script> 

» function sumFun(x, y) { 
8 


SU = X + Y3 CA/ch27_,.. 
9 Window.alert(x + "+" + Yy + "=" + SUM); 
19 - 
11 </script> 
12 </head> This page says: 
13 <body> 2 | 


14 《py> 请 点 选 下 列 公式 </p> 
15 <a href="#" onclick="sumFun(20, 30)">x + y</a> 


16 </body> 
17 </html> 


程序 实例 ch27_3.html : 重新 设计 ch27_2.html， 这 个 程序 主要 是 更 改 第 15 行 ， 不 使 用 onclick 事 
件 ， 直 接 用 超 链接 的 特性 。 
16 <a href="javascript:sumFun( 20, 30 );">x + y</a> 与 ch27 2.html 相同 。 


类 函数 调用 同时 有 返回 值 


设计 一 个 有 返回 值 的 函数 时 ， 可 在 函数 末端 使 用 return 语句 返回 相应 的 值 ， 基 本 语法 如 下 : 


function funName (Parameter1l，… , patameterN) { 
系列 statements; 


return 返回 值 7 


HTML5+CSS3 王者 归来 


这 一 节 内 容 ， 笔 者 同时 使 用 了 两 个 <script> 元 素 ， 一 个 <script> 放 在 <head> 元 素 内 ， 另 一 个 
<script> 放 在 <body> 元 素 内 。 当 然 读者 在 设计 程序 时 ， 也 可 不 必 如 此 ， 不 过 将 来 看 到 有 的 网 页 源 代 
码 有 多 个 <script> 元 素 时 ， 不 用 感到 意外 。 
程序 实例 ch27_4.html : 设计 一 个 加 法 函数 ， 使 其 能 返回 运算 结果 。 


1 <!doctype html> 16 <script> 
2 <html> 17 document.getElementById("ex").innerHTML = sumFun(20, 30); 
3 <head> 18 </script> 

4 <meta charset="utf-8"> 19 </body> 

5 <title>ch27_4.html</title> 20 </html> 

6 <script> 

了 function sumFun(x, y) { = 

8 sum = + y; 执行 结果 

9 return sum; 

10 

1 script> JavaScript function with return data 

12 </head> 

13 <body> 50 


14 <p>JavaScript function with return data</p> 
15 <p id="ex"><p> 


上 述 函 数 的 第 8 和 第 9 行 ， 也 可 以 使 用 下 面 的 1 行 代码 取代 。 


return X+ Y7 


程序 实例 ch27_5.html : 将 华氏 温度 转换 成 摄氏 温度 。 


1 <ldoctype html> 
2 <html> 
3 《heady> 
‘<meta charset="utf-8"> 


4 

5 <titlexch27_5,html</title> 
6 cseripty 执行 结 
7 // 华氏 湿度 转 成 摄氏 

a 


function toc(fahrenheit) { 
return (5/9) * (fahrenheit - 32); 


k 

19 <¢/script> 
11 </head> 

12 <body> Itis 40 Celsius 
13 xp>Calculate the celsius using fahrenheit</p> 

14 xp id-"ex"><p> 

15 <script> 

16 。 document ,BetElementById("ex"),innerHTML = "It is ”+ toc( 184 ) + " Celsius"; 

17 </script> 

18 </body> 

19 </html> 


27=4 | 全 局 变量 与 局 部 变量 


在 设计 函数 时 ， 另 一 个 重点 是 适当 地 使 用 变量 名 称 。 如 果 计划 让 某 个 变量 为 整个 HTML 文件 皆 
可 使 用 ， 可 以 将 此 变量 设 为 全 局 变量 (global variable)。 这 样 不 仅 这 个 函数 可 以 使 用 ， 所 有 程序 内 
的 函数 都 可 以 使 用 。 全 局 变量 一 般 在 <script> 内 声明 ， 是 在 函数 外 的 变量 。 局 部 变量 是 指 在 <script> 
内 ， 同 时 也 在 函数 〈function〉 内 声明 的 变量 ， 局 部 变量 的 影响 范围 仅 限 在 所 声明 的 函数 内 。 
程序 实例 ch27_6.html : 全 局 变量 的 应 用 。 这 个 程序 第 13 行 声明 一 个 全 局 变量 msg， 第 14 和 第 16 
行 直接 输出 此 全 局 变量 。 程 序 第 15 行 是 调用 txtStr 函数 ， 由 于 这 个 函数 内 部 并 没有 msg 变量 声明 ， 


Calculate the celsius using fahrenheit 


相 


22 
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当 于 直接 传 回 全 局 变量 msg， 所 以 最 后 输出 的 3 行 全 使 用 了 全 局 变量 msg。 
<ldoctype html> 
<html> 
<head> 

meta charset="utf-8"> OC | 

<title>ch27_6.html</title> Excrcise Global Variable 
</head> ex1 ~ Global Variable 
<body> 
<p> Exercise Global Variablec/p> ex2 = Global Variable 
<p id="ex1"><p> ee 
<p X2"><P> 
<p id="ex3"><p> 
<script> 

var msg = "Global Variable” // 全 局 变量 

document ,getElementById("exl").innerHTML = "exl = ”+ msg; 

document .getElementById("ex2").innerHTML =- "ex2 = ”+ txtstr( ); 

document .getElementById( "ex3").innerHTML = "ex3 = ”+ MSBg; 

function txtstr( ) [ 

return msg; // 传 回 全 局 变量 

} 
</script> 
</body> 
</html> 


程序 实例 ch27_7.html : 局 部 变量 的 应 用 。 这 个 程序 第 13 行 声明 一 个 全 局 变量 msg， 第 14 和 第 16 
行 直接 输出 此 全 局 变量 。 程 序 第 15 行 是 调用 txtStr 函数 ， 由 于 这 个 txtStr 函数 内 部 声明 了 局 部 变量 
msg， 所 以 传 回 的 是 局 部 变量 msg 的 值 ， 从 最 后 输出 中 可 以 看 到 局 部 变量 的 值 “Local Variable”。 


<ldoctype html> 
<html> 
<head> 
‘<meta charset="utf-8"> 
<title>ch27_7.html</title> 
‘</head> 
<body> 
<p> Exercise Global variable</p> 
<p id="ex1"><p> 
<p id="ex2"><p> 


Exercise Global Variable 


exl ~ Global Variable 
ex2 = Local Variable 
ex3 = Global Variable 


<p id="ex3"><p> 
<script> 
var msg = "Global Variable"; // 全 局 变量 
document . getElementById("ex1").innerHTML ~ "exl =- ”+ msg; 
document .getElementById("ex2") .innerHTML = "ex2 = ”+ txtStr( ); 
document ,getElementById("ex3").innerHTML = "ex3 = ”+ MSE; 
function txtstr( ) { 
var msg = "Local Variable"; // 局 部 变量 
return msg; // 传 回 局 部 变量 
日 
</script> 
</body> 
</html> 


| 27-5 | 函数 被 定义 在 对 象 内 


在 25-6-3 节 笔者 介绍 了 对 和 象 (object) 


的 基本 定义 ， 也 介绍 了 存 取 对 象 的 方法 ， 其 实 这 些 皆 算 


是 面向 对 象 的 程序 设计 观念 ， 在 定义 对 象 时 可 能 会 含有 函数 的 情形 ， 如 下 所 示 : 


11 
12 
13 
14 
15 
16 
3 
18 


var student = { 
firstName: "Peter™", 
lastName: "Hung", 
id:1234, 
stuName:function( ) { 
return this.firstName + 
} 
bs 


// 函数 存在 对 象 内 


+ this.lastName; 
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当 在 声明 对 象 时 ， 对 象 内 的 属性 有 函数 ， 对 于 JavaScript 来 说 可 将 函数 理解 成 方法 ， 或 是 属 
性 。 其 实 它 既 是 对 象 ， 也 是 方法 ， 也 是 属性 ， 此 时 可 以 用 下 列 方 式 存 取 对 象 。 
如 果 我 们 想 存 取 stuName 属性 ， 可 以 使 用 下 列 叙 述 : 


getname = stuName( ) 7 


程序 实例 ch27_8.html : 输出 姓名 的 应 用 。 


1 <ldoctype html> 26 </script> 


2 Re 21 </body> 

3 <head> 

a <meta charset="utf-8"> 22 /htal> 

5 <title>ch27 8.html</title> 

6 «</head> 2 二 J 十 

7 <body> 执行 结果 

8 《p> 简单 输出 的 应 用 </p> 

9 <p id="ex"></p> 

16 ¢script> 

11 var student = { 1 
12 firstName:"Peter", 简单 输出 的 应 用 
13 1lastName:"Hung"， 

14 id:1234， et 

15 stuName:function( ) { // 函数 存在 对 象 内 P H g 

16 return this.firstName + ””+ this.1astName; 

17 } 


入 
19 。 document,getElementById("ex") .innerHTML - student.stuNane( ); 


如 果 在 上 述 程序 中 我 们 漏 了 “0”， 而 使 用 student.stuName， 则 将 得 到 函数 的 定义 。 
程序 实例 ch27_9.html : 重新 设计 ch27_8.html， 但 是 漏 了 “0”。 


1 <ldoctype html> 26 </script> 

2 <html> 21 </body> 

3 <head> 22 </html> 
<meta charset="utf-8"> 


4 
5 <titleych27_9.html</title> a 

6 </head> 执行 结果 

7 

8 


<body> 
<p> 简 单 输出 的 应 用 </p> 

9 <p id="ex"></p> 简单 输出 的 应 用 

19 <script> 

11 var student = { 


function ( ) { retum this firstName + " " + this.lastName; } 


Ek firstName:"Peter”， 

13 lastName: "Hung”， 

14 id:1234, 

15 stuName: function( ) { 

16 return this.firstName + " " + this.lastName; 
17 } 

18 


19 en = student. stuName; 
本 例 重点 要 关注 的 是 第 19 行 的 student.stuName。 
习题 
1. 请 重新 设计 ch27_4.html， 将 程序 改 成 输入 摄氏 温度 转 成 华氏 温度 。 
2. 请 重新 设计 ch27_4.html， 将 程序 改 成 以 window.prompt(O) 函数 得 到 所 输入 的 华氏 温度 ， 然 后 输出 
摄氏 温度 。 
3. 设计 一 个 比 大 小 的 函数 ， 这 个 函数 将 返回 较 大 值 。 
4. 设计 一 个 比 大 小 的 函数 ， 这 个 函数 将 返回 较 小 值 。 
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本 章 摘要 

28-1 认识 BOM 
28-2 window 对 象 
28-3 screen 对 象 
28-4 navigator 对 象 
28-5 history 对 象 
28-6 location 对 象 


BOM 是 Browser Object Model 的 缩写 ， 简 单 地 说 ，BOM 是 JavaScript 与 浏览 器 沟通 
的 桥梁 。 其 实 目 前 BOM 仍 未 有 标准 ， 现 在 大 多 数 的 浏览 器 厂商 彼此 遵循 一 定 规则 规划 在 浏览 程 
序 内 ， 所 以 大 部 分 功能 是 适用 于 所 有 浏览 器 的 。 
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| 28-1 | 认识 BOM 


BOM 是 一 个 树 状 的 对 象 结 构 ， 它 的 组 成 可 参考 下 图 。 


最 顶层 的 window 对 象 所 指 的 就 是 浏览 器 窗口 本 身 ，window 对 象 下 可 以 有 document、event、 
frame、history、location、navigator 对 象 ， 程 序 设计 师 可 以 使 用 JavaSeript 配 合 各 对 象 的 属性 
(property) 和 方法 Cmethod)， 来 存 取 和 操作 上 述 对 象 。 
在 上 图 可 以 看 到 document 对 象 ， 它 指 的 就 是 HTML 网 页 文件 的 元 素 。W3C 另外 建立 了 文件 对 
象 模型 DOM (Document Object Model)， 我 们 可 以 用 利用 DOM 的 接口 更 进一步 存 取 与 操作 它们 ， 
下 一 章 会 对 此 做 解说 。 


| 28-2 window 对 象 


在 JavaScript 中 所 有 全 局 对 象 、 全 局 变量 、 函 数 其 实 都 是 window 对 象 成 员 。 
口 “ 全 局 变量 是 window 对 象 的 属性 ( property )。 
口 ”全 局 函数 是 window 对 象 的 方法 ( method )。 
口 ”甚至 document 对 象 也 是 window 对 象 的 属性 。 


28-2-1 有趣 的 程序 测试 


程序 实例 ch28_1.html : 测试 JavaScript 全 局 变量 为 window 对 象 的 属性 。 这 个 程序 的 重点 是 全 局 
变量 x 在 第 9 行 声明 ， 但 是 在 第 10 行使 用 “window.x” 输 出 。 


1 <ldoctype html> 下 列 是 在 Chrome 中 的 执行 结果 。 


2 <html> 

3 <head> 

4 <meta charset="utf-8"> This page says: 

5 <title>ch28_1.html</title> i 

6 </head> 

7 <body> ee 
8 <script> Woe 
9 var x = 10; // 声明 全 局 变量 x 
19 window.alert (window.x); // Blwindow.x 输 出 
11 </script> 

12 </body> 

13 </html> 


x 
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从 第 11 章 起 笔者 已 经 多 次 使 用 alert0 函数 了 ， 其 实 这 个 函数 是 window 对 象 的 方法 ， 使 用 时 我 
们 可 以 省 略 “window ”。 
程序 实例 ch28_2.html : 重新 设计 ch28_1.html。 这 个 程序 的 关注 重点 是 第 10 行 ， 省 略 了 


“window ”。 
10 alert(x); // 以 alert(x) 园 出 执行 结果 与 ch28 1.html 相同 。 


之 前 笔者 曾 说 document 对 象 也 是 window 对 象 ， 因 此 在 前 面 JavaScript 相关 章节 笔者 也 使 用 了 
许多 。 下 列 方法 可 用 于 存 取 元 素 内 容 。 

document .getElementByID ( id) .innerHTML 

其 实 我 们 也 可 以 使 用 下 列 方 法 存 取 元 素 内 容 。 


window.document .getElementByID ( id ) .innerHTML 
程序 实例 ch28_3.html : 重新 设计 ch25_4.html， 这 个 程序 的 关注 重点 是 第 11 行 。 
11 window.document.getElementById("ex").innerHTML = 100; 执行 结果 与 ch25 4.html 相同 。 


28-2-2 window 对 象 的 属性 


28-2-2-1 获得 浏览 器 的 宽度 与 高 度 
window 对 象 有 下 列 属性 可 以 获得 浏览 器 窗口 的 宽度 和 高 度 。 


window.innerHeight - 高 度 ， 单 位 是 pixels ( px) 
window.innerWidth - 宽度 ， 单 位 是 pixels (px ) 


上 述 属性 可 以 省 略 “window.”， 直接 使 用 innerHeight 或 innerWidth。 其 实 省 略 “window.” 字 
符 串 可 以 节省 输入 时 间 ， 但 是 ， 如 果 你 不 是 很 熟练 的 网 页 设计 师 ， 可 能 无 法 立刻 判断 变量 究竟 是 
window 对 象 的 属性 ， 还 是 一 般 变量 。 读 者 可 自行 决定 是 否 在 程序 中 加 上 “window.”。 
程序 实例 ch28_4.html : 列 出 浏览 器 窗口 的 宽度 和 高 度 。 


1 <ldoctype html> 28 </script> 
2 <html> 

3 <head> 21 </body> 
4 <meta charset="utf-8"> 22 </html> 


<title>ch28 4.html</title> 


6 </head> 
7 <body> 执行 结果 
8 <p> 答 出 窗口 高 度 与 宽度 的 应 用 </p> 


9 <p id="ex1"></p> 
-°° ED 


19 <p id=-"ex2"></p> 


11 <script> D oa th x 

12 var winHeight = window.innerHeight; // 浏览 区 高 度 | GC [@ fle/WcyUsers/Iiin-Kwei/Desktop/ 潼 休 H.. 文 | 
13 var winWidth = window.innerWidth; // 浏览 区 况 度 

14 var outHeight ~ window.outerHeight; // 总 宣 口 高 度 窗口 高 度 上 & 

Dy nd // 总 窗口 宽度 输出 窗口 高 度 与 宽度 的 应 用 

16 document.getElementById("exi").innerHTML - 浏览 区 heiaht = 122 , 浏览 区 width = 462 

17 “浏览 区 height = ”+ winHeight + ”， 浏 览 区 vidth -= ”+ winwidth; 

18 document .getElementById( "ex2").innerHTML = 总 窗口 height = 214 ,总 窗口 width = 478 

19 。 “总 窗口 height - ”+ outHeight + ”， 总 窗 Dwidth = ”+ outwidth; 


28-2-2-2 在 浏览 器 的 状态 栏 显示 位 置 
在 讲解 本 节 内 容 前 ， 如 果 你 的 浏览 器 没有 开启 状态 栏 ， 需 开启 浏览 器 的 状态 栏 ， 方 法 是 执行 工 
工具 栏 /状态 栏 命令 ， 如 下 所 示 : 


具 


~ 
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window 对 象 有 下 列 属性 ， 使 用 这 些 属性 可 以 获得 浏览 器 窗口 的 状态 栏 信息 。 
defaultStatus : 默认 状态 栏 信息 。 
status : 状态 栏 信息 。 
程序 实例 ch28_5.html : 在 状态 栏 显示 信息 的 应 用 ， 这 个 程序 会 先 显 示 网 页 默认 的 状态 栏 信息 
“HTML5+CSS3 王者 归来 ” 如 果 单 击 Date 按钮 ， 则 会 显示 当前 日 期 与 时 间 。 
值得 注意 ， 鼠 标 指针 离开 Date 按钮 后 ， 又 会 显示 默认 的 信息 。 这 个 程序 在 第 11 行 调用 Date() 函 
数 显 示 当 前 日 期 与 时 间 。 


1 <ldoctype html> 19 </form> 
2 <html> 28 </body> 
3 <head> 21 </html> 


4 <meta charset="utf-8"> 


§ <title>ch28_5 ,html</title> = 
6 <script> 执行 结果 
7 function load( ) { 
8 defaultstatus = "HTML5+CSS3 王 者 归来 * // 状态 栏 显 示 书 名 


9 BB 状态 栏 和 9 针 出 应 用 状态 栏 的 输出 应 用 

19 function displayDate( ) { Qe 

11 status = new Date( ); // 状态 栏 显示 日 期 md 

12 HtsrcsssEeBs MeN » 2 Sathwg262017235002 GMT-0800 (M0 116% 


B 
13 </script> 
14 «</head> 
15 <body onload="load( )"> 
16 <p> 状 态 栏 的 输出 应 用 </p> 
17 <form> 
18 <input type-"button" onclick-"displayDate( )" value-"Date"> 


如 果 没 有 默认 状态 栏 数据 (本 例 是 本 书 书 名 )， 只 要 单 击 Date 按钮 后 ， 状 态 栏 将 持续 显示 当前 
的 日 期 与 时 间 。 

28-2-2-3 window 对 象 的 其 他 属性 

下 列 是 window 对 象 其 他 属性 的 说 明 : 

closed : 窗口 是 否 关 闭 ，true 表示 是 ，false 表示 否 。 

document : document 对 象 。 

history : history 对 象 。 

length : 窗口 的 框架 数目 。 

location : location 对 象 。 

name : 窗口 名 称 。 

navigator : navigator 对 象 。 

opener : 这 个 窗口 的 开启 者 。 

pageXOffset : 文件 窗口 距离 显示 区 左上 角 的 x 位置 。 

pageYOffset : 文件 窗口 距离 显示 区 左上 角 的 y 位 置 。 

parent : 指向 父 窗口 。 

self : 指向 window 对 象 本 身 。 
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top : 指向 最 上 层 窗口 。 

screen : screen 对 象 。 

screenX : 窗口 左上 角 距 离 屏 幕 左 上 角 的 x 轴 距 离 。 
screenY : 窗口 左上 角 距 离 屏 幕 左上 角 的 y 轴 距 离 。 


28-2-3 window 对象 的 方法 


28-2-3-1 ”定时 器 设 定 

window 对 象 有 下 列 参 数 可 以 执行 计时 功能 。 

idTime = setTimeout ( function，milliseconds ) ; 
上 述 参数 意义 如 下 : 

idTime 是 此 定时 器 的 返回 参数 ， 可 由 此 关闭 此 定时 器 。 
function : 计时 到 达 时 ， 所 执行 的 函数 。 

milliseconds : 千 分 之 一 秒 。 

下 面 是 关闭 上 述 定时 器 的 方法 。 


clearTimeout ( idTime ) ; // 关闭 idTime 定时 器 


程序 实例 ch28_6.html : 这 是 一 个 设 定 定 时 器 的 设计 ， 窗 口 状态 栏 会 显示 “计时 中 …” 或 “计时 结 
东 ”， 每 一 次 计时 时 间 是 3 秒 。 


电 
过 
, 


miaup 


<ldoctype htnl> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch28 6.html</title> 
<script> 
var idTime; 


function stopTime ( ) { // 询问 是 否 释 续 


Var intBoolean = confirm(" 是 否 毕 法 计时 ?") 3; 
if ( intBoolean == false ) { 
status =“ 计 时 结束 "; // 列 出 计时 结束 
clearTimeout( idTime ); /1 计时 结束 
else:t. 
counterTime( ); /1 重新 计时 
} 
下 
function counterTime( ) { // 设 定 计时 
status =“ 计 时 中 。，” // 列 出 计时 中 字符 申 
idTime = setTimeout( stopTime, 3608); /1 计时 是 3 秒 
</script> 
</head> 
<body> 
《p>Window 定 时 器 运作 </p> 
<form> 《1-- 启动 计时 --> 
<input type="button" onclick="counterTime( )" value="Tiner"> 
</form> 
</body> 
</html> 


Window 定 时 器 运 作 window 证 时 器 运作 window 定 时 器 运作 
[me me @ = 


R16% ~ 二 去 1166 ~ 二 [E> R16% 
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上 述 程序 第 9 行使 用 了 confirm() 方法 ， 这 个 方法 执行 时 会 产生 信息 ， 单 击 “ 确 定 ”按钮 会 传 回 
true， 单 击 “ 取 消 ”按钮 会 传 回 false。window 对 象 另 一 组 常用 的 计时 方法 是 : 


idTime = setInterval ( function，milliseconds ) ; 


上 述 参 数 意义 如 下 : 

function : 每 隔 特定 时 间 的 周期 ， 会 执行 此 函数 。 

milliseconds : 单位 是 千 分 之 一 秒 。 

idTime : 执行 setInterval 的 返回 值 ， 可 用 此 关闭 此 计时 。 

clearInterval( idTime ) 函数 可 以 关闭 idTime 定时 器 。 
程序 实例 ch28_7.html : setInterval() 和 clearInterval() 函数 的 应 用 。 这 个 程序 在 执行 时 ， 若 单 击 
“显示 时 钟 ” 按 钮 ， 可 以 显示 时 钟 ， 若 单 击 “ 暂 停 时 钟 ” 按 钮 ， 可 和 暂时 中 止 其 显示 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 cmeta charset="utf-8"> 


5 <title>ch28 7.html</title> 
6 <script> 

天 var idMyTime; 

8 function stopTime ( ) { // 时 钟 著 售 

9 clearInterval( idkyTime ); 

10 document. getElementById("ex").innerHTML = “时钟 匣 厚 "; 

11 

12 function startTime( ) { 

13 var currentTime = new Date( ); 。 // 获得 时 钟 信息 

14 var localTime = currentTime.toLocaleTimestring( );  // 甘 成 时 间 字 符 龟 
15 document .getElementById("ex").innerHTML = localTime; 

16 } 

17 function myTime( ) { // 起 动 时 钟 

18 idMyTime = setInterval(function ( ) { startTime( ) }, 1960 ); 


} 
29 </script> 
21 </head> 
22 <body> 
23 <p>window 时 钟 设计 </p> 
24 <p id-"ex"> 时 钟 尚未 启动 </p> 
25 <form> <1-- 星 示 辣 暂停 按钮 设计 --> 
26 <input type="button” onclick="myTime( )”value=" 亚 示 时 钟 "> 
27 <input type="button”onclick="stopTime( )”value=" 暂 停 对 种 "> 


28 </form> 
29 </body> 
38 </html> 
二 疆 
执行 结果 Window 时 钟 设计 Window 时 钟 设计 Window 时 钟 设计 
时 钟 尚 未 启动 上 午 12:01:04 时 钟 暂停 
[EH 名 | 重信 时 种 [时 未 时 加 ][ 暂停 时 捉 | [时 时 钟 ][ 笃信 时 钟 | 


上 述 程 序 的 第 14 行 toLocaleTimeString() 函数 可 将 时 间 信 息 转 成 当地 的 时 间 。 本 例 是 转 成 “上 
年 12:01:04”。 

28-2-3-2 open0 和 close0 

open() 可 以 开 新 窗口 ，close() 可 以 关闭 窗口 。open0) 的 使 用 语法 如 下 : 

winID = window.open (URL, name, specs, replace ) 7 
口 URL 

这 是 可 选项 ， 可 以 设 定 与 开启 网 页 文件 的 URL， 如 果 不 指定 ， 则 开启 的 窗口 是 空白 页 

(blank )。 
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DQ name 


可 设 定 target 属性 ， 可 能 的 值 如 下 : 
_self : 在 目前 的 浏览 页 面 下 显示 ， 这 是 系统 默认 设置 。 
_blank : 在 现成 的 浏览 器 下 新 增 一 个 浏览 页 面 。 
_parent : 如 果 目 前 的 页 面 有 父 层 级 ， 在 父 层 级 页 面 显 示 。 
_top : 在 目前 浏览 器 的 最 顶端 显示 。 
name : 窗口 的 名 称 ， 可 以 新 增 一 个 浏览 器 窗口 。 
口 specs ( 所 开启 的 窗口 特色 ) 
可 以 有 下 列 值 : 
channelmode : 值 可 以 是 yes | no | 110， 即 是 否 用 剧院 模式 开启 ， 默 认 值 是 否 。 
directory : 值 可 以 是 yes | no | 1|10， 即 是 否 增加 目录 按钮 ， 默 认 是 开启 ，IE 支持 。 
fullscreen : 值 可 以 是 yes | no | 110， 即 是 否 以 全 屏幕 开启 ， 默 认 是 否 ，IE 支持 。 
height : 值 为 窗口 高 度 ， 最 小 值 是 100， 单 位 是 px。 
left : 值 为 窗口 的 x 轴 坐 标 ， 必 须 是 正 值 ， 单 位 是 px。 
location : 值 可 以 是 yes | no | 110， 即 是 否 显示 网 址 栏 ， 默 认 是 显示 。 
menubar : 值 可 以 是 yes | no | 110， 即 是 否 显 示 菜 单 。 
resizable : 值 可 以 是 yes | no |1|0， 即 是 否 可 更 改 窗口 大 小 。 
scrollbars : 值 可 以 是 yes | no | 1|0， 即 是 否 显示 滚动 条 。 
status : 值 可 以 是 yes | no | 110， 即 是 否 显示 状态 栏 。 
titlebar : 值 可 以 是 yes | no |110， 即 是 否 显示 标题 栏 。 
toolbar : 值 可 以 是 yes | no | 110， 即 是 否 显示 工具 栏 。 
top : 窗口 的 y 轴 坐 标 ， 必 须 是 正 值 ， 单 位 是 px。 
width : 窗口 宽度 ， 最 小 值 是 即 是 100， 单 位 是 px。 
口 _ replace 


这 是 逻辑 值 ，true 表示 替换 浏览 历史 (history) 的 条 目 〈entry)。false 表示 在 浏览 历史 中 建 
立新 的 条 目 。 
口 _winlID 

这 是 开启 新 窗口 后 的 返回 值 。 读 者 可 以 自行 设 定 这 个 返回 值 的 名 称 ， 之 后 可 以 使 用 这 个 返回 值 
操作 此 窗口 。 

关闭 窗口 方法 如 下 : 

winID-close ( ) ; 
程序 实例 ch28_8.html : 开启 新 窗口 与 关闭 窗口 的 应 用 。 所 开启 的 窗口 在 同一 浏览 器 出 现 。 程 序 第 
14 行 省 略 name 参数 ， 相 当 于 _blank 参数 效果 。 
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1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

EL <title>ch28 8.html</title> 
6 </head> 

7 <body> 

8 <p> 开 启 新 窗口 Mindow</py> 


9 <button onclick="openin( )">Open Window</button> 
19 <button onclick="closeWin( ) ">Close Window</button> 


11 <script> 
12 var myfirstWin; 
13 function openwin( ) { 


// 在 相隔 浏览 器 开 新 窗口 


14 myfirstWin -= window.open("", "width-390,height-150"); 
15 

16 function closewin( ) { // 关闭 窗口 

17 myfirstwin.close(); 

18 } 

19 </script> 

28 </body> 

21 </html> 


下 列 是 在 chrome 中 的 执行 结 
果 ， 可 单 击 Open Window 按钮 开启 新 窗口 。 


1 BD chz8_8html x \® 


| > C |© fle/Wc/Useriin-Kwe/Desktop.. 女 | : 


| 开启 新 窗口 Window 
Lapenwndow 


在 父 窗口 ， 单 击 Close Window 按钮 可 关闭 
新 增 窗 口 。 


JR ) 
| ; C | © aboutblark 女 | ! 


一 -o 
A 


程序 实例 ch28_9.html : 重新 设计 ch28_8.html， 以 新 的 窗口 显示 所 建 的 窗口 。 这 个 程序 只 是 程序 的 
修改 了 原 程序 的 第 14 行 ， 增 加 为 窗口 命名 。 
14 myfirstWin = window.open("", "myFirstWindow", "width=388, height=150"); 下 列 是 所 建 的 新 窗口 。 


| @ Untitled - Google Chro.. — 口 
© aboutblank 


程序 实例 ch28_10.html : 重新 设计 ch28_8.html， 扩 充 第 14 行 ， 增加 显示 工具 栏 、 状 态 栏 功能 ， 
可 以 调整 窗口 大 小 ， 同 时 设 定子 窗口 的 位 置 。 


13 function openwin( ) { // 在 不 同 浏览 哮 开 新 窗口 7 二 4 士 于 
14 myfirstWin = window.open(””,”_blank”, 执行 结果 下 列 是 正 的 执行 结果 。 
15 "toolbar=yes, status=1, resizable=1,top=200, 1eft=300,width=690, height=300"); 
1 ) 门 空白 丰 - Intemet Explorer ET | 
育 多- 国 - 名 和 师 - am- 2 Ino)- 才 - ” 
Fu 


在 BOM 模型 下 ， 父 窗口 与 子 窗口 可 以 互动 交流 ， 例 如 : 父 窗口 可 以 将 所 建 的 子 窗口 关闭 ， 子 窗 
口 也 可 以 传递 信息 给 父 窗口 。 子 窗口 传递 信息 给 父 窗口 使 用 的 是 opener 属性 ， 可 参考 下 面 的 实例 。 
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程序 实例 ch28_11.html : 这 个 程序 执行 时 ， 若 是 单 击 Run 按钮 ， 会 建立 一 个 子 窗口 ， 同 时 子 窗口 
会 传递 信息 “This Message from child Window” 给 父 窗口 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch28 11.html</title> 
6 </head> 

7 <body> 

8 <p> 信 息 交 换 </p> 

9 <button onclick="testFun( )">Run¢/button> 
18 <script> 

11 var childWin; 

12 function testFun( ) { 


13 childwin = window.open(™","_blank", 
14 “toolbar=yes, status=1, resizable=1,top=290, left=388,width=689,height=380"); 
15 childWin.document.write("<p>This is child Windowé/p>"); 

16 childWin.opener. docunent .write("<¢p>This Message from child Window</p>"); 
一 

18 </script> 

19 </body> 

28 </html> 


执 


信息 交换 This Message from child Window Thisis child Window 


28-2-3-3 scrollBy0O 和 scrollTo0 
scrollBy() 方法 是 设 定 滚动 滚动 条 的 滚动 量 ， 单 位 是 px， 格式 如 下 。 


window.scrollBy (xnum, ynum ) 


xnum : x 轴 的 滚动 量 ， 正 值 是 往 右 滚 动 ， 负 值 是 往 左 滚动 。 
ynum : y 轴 的 滚动 量 ， 正 值 是 往 下 滚动 ， 负 值 是 往 上 滚动 。 
scrollTo() 方法 是 设 定 滚 动 条 的 滚动 位 置 。 


window.scrollTo (xpos, ypos ) 


xpos : 深 到 x 轴 位 置 。 
ypos : 滚 到 y 轴 位 置 。 
程序 实例 ch28_12.html : 这 个 程序 会 依 指定 方向 滚动 滚动 条 ， 每 次 30px。 


1 xldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>xch28 12.html</title> 

6 <style> 

过 body { width;leeepxy height:1999px; } /* 要 设 定 较 大 区 同 才 会 显示 裳 动 条 */ 

8 button { position;fixed; } /* 将 button 定 位 */ 

9 /styley 热 和 
10 </head> 

11 <body> | 

12 <h1> 深 石 数位 </p> 

13 《py 深度 学 习 滴水 穿 石 c/py 深 石 数位 

14 <button ere ere(o0s0y heh /ton 

15 <button onclick="scrollMove(-39,6) ">| </buttony<br> 深度 学 习 滴水 穿 石 


16 <button onclick="scrollMove(8,38)"> 向 下 滚动 </button><br> 
17 <button onclick="scrollmove(a,-39)"> 向 上 滚动 </buttonycbr> 


18 《script> i 
19 function scrollmove(x, y) { EE 
20 scrollBy(x,y) i 
i 一 

22 </script> 


EPE 
23 </body> 
24 </html> + 
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28-2-3-4 window 对 象 的 其 他 方法 

下 列 是 window 对 象 其 他 的 方法 说 明 : 

blur0 : 移 除 该 窗口 的 焦点 (focus)。 

createPopup() : 建立 一 个 弹出 窗口 。 

focus() : 为 该 窗口 取得 焦点 。 

moveBy(xX,y) : 以 (x,y) 相对 位 置 移动 窗口 。 

moveTo(x,y) : 窗口 移 至 相对 屏幕 左上 和 角 绝对 位 置 (x,y)。 

resizeBy(x,y) : 调整 窗口 大 小 ， 变 化 量 水 平 轴 是 x， 垂 直 轴 是 y， 单 位 是 px。 
resizeTo(x,y) : 将 窗口 调整 至 水 平 轴 是 x， 垂 直 轴 是 y， 单 位 是 px。 


screen 对 象 


screen 对 象 包含 用 户 的 屏幕 信息 ， 这 个 对 象 包含 下 列 属性 。 
screen.height : 屏幕 高 度 ， 单 位 是 px。 
screen.width : 屏幕 宽度 ， 单 位 是 px。 
screen.availHeight : 屏幕 可 用 高 度 ， 不 包含 屏幕 下 方 的 任务 栏 ， 单 位 是 px。 
screen.availWidth : 屏幕 可 用 宽度 ， 不 包含 屏幕 左 方 的 任务 栏 ， 单 位 是 px。 
screen.colorDepth : 颜色 深度 ， 列 出 每 个 像素 用 多 少 位 储存 ， 单 位 是 px。 
screen.pixelDepth : 意义 与 screen.colorDepth 相同 。 

程序 实例 ch28_13.html : 列 出 用 户 的 屏幕 信息 。 


1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 


5 <title>ch28 13.html</title> Ca 
6 </head> 执行 结果 


7 “<“h1> 获 得 屏幕 信息 </h1> 

8 <p id-"ex1"> 屏 大 高 度 =</p> 
9 <p id="ex2"> 屏 莫 可 月 高 度 =</p> 用 a 
19 <p id-vexawy 屏 其 帘 底 -4/py 获得 屏幕 信息 
11 <p id="ex4"> 屏 幕 可 月 宽度 =<</p> 


19 </script> 
28 </body> 
21 </html> 


12 <p id="ex5"> 屏 侨 额 色 深度 =</p> 屏幕 高 度 =864 
13 “script> 屏幕 可 用 高 度 -826 
14 docunent.getElementById("ex1").innerHTML += screen.height; i 

15 document. getElementById("ex2").innerHTML += screen.availHeight; 2 

16 document getElementById("ex3") .innerHTML += screen.width; 屏幕 可 用 宽 讼 -1536 
17 document ,getElementById("ex4") .innerHTNL += screen.availWidth; 屏幕 颜色 深度 -24 


18 document. getElementById("ex5").innerHTML += screen.colorDepth; 


| 28-4 | navigator 对 象 


这 个 对 象 用 于 获得 用 户 的 浏览 器 信息 ， 这 些 信息 是 只 能 读 取 的 信息 ， 下 列 是 此 对 象 的 属性 说 明 。 
appCodeName : 浏览 器 的 程序 代码 名 称 ， 例 如 Mozilla。 

appMinorVersion : 浏览 器 的 辅 版 本 号 。 

appName : 浏览 器 名 称 。 
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appVersion : 浏览 器 的 版 本 号 。 
browerLanguage : 浏览 器 所 用 语言 。 
cookieEnabled : 浏览 器 是 否 使 用 cookie 功能 ，true 表示 是 ，false 表示 否 。 
cpuClass : 返回 CPU 类 型 。 
onLine : 返回 目前 浏览 器 是 否 联 机 ，true 表示 是 ，false 表示 否 。 
platform : 返回 浏览 器 的 操作 系统 平台 。 
systemLanguage : 返回 操作 系统 目前 的 语系 。 
userAgent : 返回 HTTP Request 中 user-agent 的 值 。 
userLanguage : 返回 浏览 器 操作 系统 所 用 语言 。 
程序 实例 ch28_14.html : 列 出 目前 笔者 所 使 用 浏览 器 的 信息 。 


1 <ldoctype html> 4 二 丝 
2 xhtml> 执行 结果 


3 <head> 


4 <meta charset="utf-8"> 

5 <title>ch28 14.html</title> 获得 浏览 器 信息 

6 </head> 

7 <body> Mercodeene Mea 

8 <h1> 获 得 浏览 式 信 息 </h1> appName Naepe 

9 cp id="ex"yc/p> eppVerion 0 (Windowa NT 63; WOWGt Trident/7 0: Touts NETA 0, NETHAC; NET CL 3 3029, NET 
CHR OT NET CLR 93072%, Tibet PC 20 MAARS; v1) lhe Gecko 

19 <script> 
pner Veog: 0 


11 var bInfo = ""; 
12 bInfo += "<p> 浏 览 本 appCodeName: ”+ navigator,appCodeName + "</p>"; 
13 。 bInfo += "<py 浏 览 器 appName: ”+ navigator .appName + “</p>"; 


14 。 bInfo += "<p> 浏 览 器 appVersion: " + navigator.appVersion + "</p>"; MeL lee re 
15 bfnfo +- "xpy 济 览 儿 apphtinorVersion: ”+ navigator.appMinorVersion + "</py"; Niemen dTwW 

16 。 brnfo += “<py 浏 览 器 cookie Enabled: ”+ navigator.cookieEnabled + “</py"3 a 

17 。 brnfo t= “p> 浏览 哮 计 算 机 cpuclass: ”+ navigator.cpuClass + "</p>"; Eee 

18 。 bInfo +- “py 浏览 医 onLine; ”+ navigator.onLine + “</p>"; ps 

19 。bInfo +- “<p> 浏览 名 Language; ”+ navigator.browserLanguage + "</p>"; RE 
29 。 binfo += "¢p>User Language; ”+ navigator.userLanguage + "</p>"; BS MT NET CLR 3 OSEY, NETCLRO30T2 Tatet PC 20: NAARS, VI Mask 


24 blInfo += "<pySysten Language: ”+ navigator.systenLanguage + "</p>"; 
22 bInfo += “<p> 操 作 系统 platform:; ”+ navigator,platform + "</p>"; 

23 。 bfnfo += “<pyHTTP Request userAgent: ”+ navigator.userAgent + "</p>™; 
24 。 document.BetElementById("ex") .innerHTHL += bInfo; 

25 «</script> 

26 </body> 

27 </html> 


上 述 有 些 数据 只 能 参考 ， 不 一 定 完 全 正确 ， 例 如 笔者 使 用 的 是 正 浏览 器 却 得 到 Netscape 浏览 器 
的 结果 ，Netscape 是 约 20 年 前 的 浏览 器 啊 ! 


| 28-5 history 对 象 


这 个 对 象 包含 浏览 器 的 浏览 记录 ， 这 个 对 象 只 有 一 个 属性 。 

legnth : 记录 浏览 记录 的 采 数 。 

这 个 对 象 有 下 列 方法 可 用 : 

back0 : 回 到 上 一 页 。 

forward() : 跳 到 下 一 页 。 

go(n) : n 是 正 值 则 跳 到 下 n 页 ，n 是 负 值 则 跳 到 上 n 页 。 
程序 实例 ch28_15.html : 设计 跳 到 下 一 页 与 上 一 页 的 应 用 。 在 测试 此 程序 时 ， 可 以 先 在 网 址 栏 输 
入 任 一 单位 的 网 页 地 址 ， 然 后 返回 此 网 页 ， 再 单 击 “下 一 页 ”按钮 时 可 以 跳 到 先前 单位 的 网 页 。 这 
个 程序 同时 会 列 出 浏览 记录 次 数 。 
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1 <ldoctype html> 和 

2 <html> 21 /script> 
3 <head> 22 </body> 
4 <meta charset="utf-8"> 23 </html> 
5 <title>ch28 15.html</titley 

6 </head> 

7 <body> 

8 <h1> 浏 览 器 history</hl> 

9 <p id="ex"></p> 


19 xinput type="button” value=" 上 一 页 ” onclil 
11 <input type="button” value=" 下 一 页 ” onclick: 
12 <script> 


iistoryBack( )"> 


istoryForward( )"> 浏 览 器 history 


13 -var numH = window.history; // 设 定 history 对 象 下 一 列 会 列 出 历史 记录 次 数 历史 记录 次 数 =1 
14 document.getElementById("ex") ,innerHTML =“ 历 守 记 录 次 数 = ”+ numH.length; 

15 function SN ){ // 回 到 上 一 页 i [EL 
16 window ,history.back( ); 

下 

18 function historyForward( ) { 1/ 跳 到 下 一 页 

19 window history.forward( ); 


| 28-6 location 对 象 


location 对 象 用 于 列 出 目前 浏览 网 页 的 URL 信息 ， 下 列 是 这 个 对 象 的 属性 。 
hash : 网 址 中 “#” 符 号 后 面 的 部 分 。 
host : 网 址 的 主机 名 与 通信 端口 。 
hostname : 网 址 的 主机 名 。 
href : 完整 的 URL 字符 串 。 
pathname : 网 址 的 文件 名 与 路 径 。 
port : URL 网 址 的 通信 端口 。 
search : 返回 URL 网 址 “?” 符 号 后 面 的 信息 。 
这 个 对 象 有 下 列 方 法 可 用 : 
assign( URL) : 载 入 参数 URL 的 网 页 。 
reload() : 重 载 目前 开启 的 网 页 。 
replace( URL) : 载 入 URL 的 网 页 ， 同 时 用 这 个 网 页 取代 目前 网 页 在 history 中 的 记录 ， 相 当 于 
属性 href 设 为 目前 参数 URL。 
程序 实例 ch28_16.html : 列 出 location 属性 值 。 
1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch28 16.html</title> 
6 </head> 
7 <body> 
8 <h1>location 对 象 </h1> 
9 xp id="ex"></p> 
10 <script> ey 


11 var loInfo = ""; 
12 loInfo += "<p>hash = 


+ window.location.hash + "</p>"; 


13 loInfo += "<p>host = "+ window.location.host + "</p>"; 
14 loInfo “<p>hostname = ”+ window.location.hostname + "</p>"; 
15 loInfo "<p>URL = ”+ Window.location.href + "</p>"; 
16 loInfo += "<p>pathname = ”+ window.location.pathname + "</p>"; 
17 loInfo “<p>port = " + window.location.port + "</p>"; 


18 loInfo += "<p>search = ”+ window.location.searcch + “</p>"; 


19 。 document.getElementById("ex") .innerHTML += loInfo; 
26 </script> 

21 </body> 

22 </html> 


下 图 中 ， 由 于 程序 没有 真正 放 在 
网 页 内 ， 所 以 有 些 属性 值 是 空白 的 。 


location 对象 


URL -mWDoHTMLSrCSsych2skh2a 16 hml 
pathname ~ /DJHTMLS+CSS3/ch2a/eh2s 16 heml 
pls 

Seineh = undefined 
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下 图 所 示 是 笔者 将 HTML 文件 放 在 Intemet 
上 的 执行 结果 ， 此 时 host 和 hostname 属性 就 有 数 
据 了 。 


location 对 象 

J 

-am 

Iane ba eee 

= bepe oe eer wens ie een wick, 16 bend 
paiementhe om wicks 16 bnl 

po 

| 一 -= 


port 如 果 是 默认 值 ， 例 如 80 或 443， 就 不 会 有 返回 值 。 
程序 实例 ch28_17.html : 这 个 程序 执行 时 先 列 出 location 属性 值 ， 然 后 单 击 New Page 按钮 ， 就 会 


加 载 ch28_16.html 文件 。 


1 xldoctype html> 

2 <html> 

3 head> 

4 tmeta charset="utf-8"> 

<title>ch28 17.html</title> 

6 </head> 

7 <body> 

8 <h1>location 对 象 </hi> 

9 <p id="ex"></p> 

19 <script> 

11 var loInfo = ""; 

12 loInfo += "<p>hash = ”+ window.location.hash + "</p>"; 
13 loInfo += "<p>host = ”+ window.location.host + “</p>"; 
14 loInfo += "<p>hostname = ” 
15 loInfo += “<p?URL ~ ”+ window.location.href + "</p>"; 
16 loInfo += 
17 loInfo += "4p>port = ”+ window.location.port + "</p>"; 

18 loInfo += "<p>search = ”+ window.location.searcch + "¢/p>"; 
19 document.getElementById("ex").innerHT™ML += loInfo; 


习题 


+ window. location.hostnane + "</p>"; 


“cppathname = ”+ window.location.pathname + “</p>"; 


26 function newpage( ) { 
21 window. location.assign(“ch28_16.htm1"); 


23 </script> 

24 «<input type="button” value="New Page” onclick="newpPage( )"> 
25 </body> 

26 </html> 


location 对 象 location 对 象 
a PR 
be aa 


1. 为 ch28_6.html 增加 新 功能 ， 当 重复 计时 ， 同 时 列 出 重复 次 数 ， 格 式 可 以 自行 发 挥 创 意 。 


2. 时 间 系列 指令 如 下 : 


Var nowTime = new Date(); 


Var hh = nowTime .getHours ()7 
Var mm = nowTime .getMinutes () 7 
Var ss = nowTime .getSeconds () 7 


// 返回 时 hour 
// 返回 分 minutes 
// 返回 秒 seconds 


请 使 用 上 述 数据 为 网 页 建立 返回 时 钟 值 的 设计 ， 时 间 格 式 是 “hh:mm:ss”。 
3. 请 使 用 JavaScript 自行 撰写 属于 自己 的 confirm () 函数 。 


HTML 的 文件 对 象 模 型 DOM 


本 章 摘要 

29-1 认识 DOM 

29-2 取得 HTML 元 素 
29-3 更改 HTML 元 素 内 容 
29-4 ”DOM 节点 和 浏览 元 素 
29-5 建立、 插入 、 删 除 节点 
29-6 DOM 与 CSS 

29-7 ”HTML 的 集合 对 象 
29-8 DOM 事件 属性 


DOM 是 Document Object Model 的 缩写 。 有 了 这 个 DOM ， 我 们 可 以 使 用 JavaScript 
存 取 、 更 改 所 有 HTML 的 元 素 。 


证 全 
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认识 DOM 


DOM 是 W3C 推荐 的 标准 平台 ， 可 接受 不 同 语言 的 参考 使 用 ， 主 要 是 定义 存 取 HTML 文件 的 
方法 与 标准 。 也 可 以 说 DOM 提供 了 一 个 接口 ， 可 让 不 同 的 计算 机 语言 (programs) 或 脚本 语言 
(scripts) 动态 存 取 或 更 新 HIML 文件 的 元 素 。 这 本 书 的 重点 是 使 用 JavaScript 存 取 、 更 改 所 有 
HTML 的 元 素 。 特 别 须 留意 的 是 ，DOM 不 是 JavaScript 的 一 部 分 。 
W3C DOM 的 标准 有 3 种 : 


口 HTML DOM : HTML 文件 的 标准 ， 这 是 本 书 的 重点 。 
口 XML DOM : XML 文件 的 标准 。 
口 ”Core DOM : 所 有 文件 的 标准 。 


更 精确 地 说 ，DOM 定义 了 HTML 对 象 模 型 和 程序 接口 〈 Application Programming Interface， 
API)， 基 本 定义 如 下 : 


口 “每 个 HTML 元 素 皆 是 一 个 对 象 (object )。 
口 所 有 HTML 元 素 的 属性 ( property )。 

口 ” 存 取 所 有 HTML 元 素 的 方法 ( method )。 
口 所 有 HTML 元 素 的 事件 ( event )。 


上 述 笔 者 以 存 取 (access) 代表 DOM 对 HTML 元 素 的 定义 ， 更 精确 地 说 ，DOM 定义 了 增加 
(add)、 删 除 (delete)、 获 取 〈get) 和 更 改 (change) HTML 元 素 的 标准 与 方法 。 
当 一 个 HTML 文件 下 载 到 浏览 器 后 ， 浏 览 器 就 会 为 网 页 建立 一 个 DOM 模型 ， 这 个 模型 是 一 个 
树 状 结构 。 
程序 实例 ch29_1.html : 绘制 一 份 HTML 文件 的 树 状 结构 。 
ldctype Wis 下 列 是 上 述 HTML 文件 的 树 状 结构 。 


<html> 
<head> 
<meta charset="utf-8"> 


1 

2 

3 

; lsass 
5 <title>ch29 1.html</title> 

6 </head> Co 
7 

8 


<body> 


<h1>DOM</h1> [ed | | voy | 


9 <p>Using Javascript access HTML</p> | 


19 <ul> 
11 <1i>HTML</1i> ia ls | lta [wa 


12 <1i>CSs</1i> 


13 <1i>JavaScript</1i> ui mi [| 


14 </ul> 
15 </body> 
16 </html> 


在 上 述 DOM 的 树 状 结构 下 ，JavaScript 利用 树 状 结构 与 原理 ， 可 以 执行 下 列 工作 : 


删除 现 有 HTML 的 元 素 与 属性 。 口 、 更 改 页 面 CSS 样式 。 
新 增 HTML 元 素 与 属性 。 口 ”为 页 面 的 事件 设计 处 理 程序 。 
取得 HTML 元 素 与 属性 。 口 ”为 页 面 建立 新 的 事件 。 


更 改 HTML 元 素 与 属性 。 


OODODODO DO 
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psy 取得 HTML 元 素 


下 面 将 分 成 几 个 小 节 讲解 存 取 HTML 元 素 的 方法 。 
29-2-1 getElementByID() 


其 实 先前 我 们 已 经 使 用 这 个 方法 (method) 许多 次 了 ， 这 是 document 对 象 的 方法 ， 从 
JavaScript 相关 章节 起 ， 我 们 将 大 多 数 的 执行 结果 以 这 个 方法 存 入 HTML 元 素 内 ， 下 面 将 再 以 实例 
说 明 。 
程序 实例 ch29_2.html : getElementByID() 的 应 用 。 这 个 程序 会 读 取 标 题 元 素 <hl> 的 内 容 ， 然 
后 输出 。 


1 cldoctype html> 
2 chtml> 

3 <head> 

4 <meta charset="utf-6"> 

5 <titleych29 2.html</title> 

6 </head> 

7 <body> = 

8 <hl 1d="info">DoM</hi> <1-- 标题 元 素 内 容 --> 执行 结果 

9 《p> 使 用 getElementById 方 法 取得 元 素 内 容 </p> 

16 <p id="ex"></p> ~ 
1 <script> DOM 

12 var exInfo = document,getElementById("info"); // 取得 标题 <h1> 内 容 

13 document.getElementById("ex").innerHTML = "hi 内 容 是 = ”+ exInfo.innerHTML; 使 用 setElementByid 方 法 取得 元 素 内 容 

14 </script> 

15 </body> hi 内 容 是 ~DOM 


16 </htnl> 


29-2-2 getElementsByTagName!() 


这 一 节 所 述 的 方法 是 使 用 标记 名 称 (TagName)。 由 于 一 个 HTML 文件 内 可 能 会 有 许多 标记 名 
称 是 相同 的 ， 因 此 可 以 返回 一 个 节点 串 行 (HTMLCollection) 元 素 内 容 ， 其 中 第 一 条 数据 的 索引 是 
0， 第 二 条 数据 的 索引 是 1……， 其 他 依 此 类 推 。 

其 实 所 返回 的 节点 串 行 元 素 内 容 ， 看 起 来 好 像 是 数组 〈array)， 需 用 索引 存 取 ， 可 是 我 们 无 法 将 
数组 的 函数 push0 或 pop0 等 应 用 在 节点 串 行 上 。 
程序 实例 ch29_3.html : getElementsByTagName() 的 应 用 。 这 个 程序 会 用 标记 名 称 方法 取得 所 有 
<p> 元 素 的 内 容 ， 然 后 输出 。 


1 xldoctype htmly 
2 chtml> 

3 <head> 

4 <meta charset="utf-8"> 

5 ctitleych29_ 3.html</title> 

6 </head> 

7 <bodyy 

8 《p>DOM 观 禄 应 用 </p> 

9 <p> 使 有 getElementByTagName 方 法 取得 元 素 内 容 </p> 

19 <pyHTML5+CS53+]JavaScript</py 执行 结果 
11 <p id="exe"></p> 

12 <p id="ex1"></p> 


13 xp id-"ex2"></p> DOM 坑 仿 应 用 
14 <script> Rr 

15 var exInfo - document.getElementsByTagName("p"); // 取得 娟 落 <p> 内 容 使 用 ectomendByToeName 方 注 取 得 元 素 内 容 

16 docunent.getElementById("exa").innerH™ML = "p(9) = ”+ exInfofe].innerHTML; HIML $+Css3 -avascript 

17 docunent, getElenentById("ex1").innerHT™HL = “p(1) = “+ exInfo[l],innerHTNL; m0)=DOM 夫 太 频 用 

18 document.getElementById("ex2").innerH™L = "p(2) = ”+ exInfof2].innerHm™L; 

19 </script> PUD = 使 用 estElementByTasName 方 法 取得 元 未 内 容 
28 «</body> P(2) =HTMLS+CSS3+JavaScript 

21 </htnl> 
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29-2-3 getElementsByClassName() 


由 于 一 个 HTML 文件 内 可 能 会 有 某 些 元 素 有 相同 的 类 别 〈class) 名 称 ， 因 此 可 以 返回 一 个 相同 
类 别名 称 的 节点 串 行 元 素 内 容 ， 其 中 第 一 条 数据 的 索引 是 0， 第 二 条 数据 的 索引 是 1…… 其 他 依 此 类 
推 。 值 得 留意 的 是 元 素 不 同 ， 但 是 类 别 〈class) 相同 的 也 将 列 出 。 
程序 实例 ch29_4.html : getElementsByClassName() 的 应 用 。 这 个 程序 会 列 出 第 8、10、11 行 ， 类 
别 是 “info” 的 所 有 数据 ， 即 使 第 8 行 元素 是 <h1>， 其 他 两 行 元 素 是 <p>， 也 将 通通 列 出 来 。 


1 《ldoctype html> 

2 <html> 

3 <head> 

4 ‘<meta charset="utf-8"> 

5 <title>ch29 4.htnl</title> 
6 </head> 

7 <body> 

8 <hl class="info">DeepStone</h1> 
9 <pyDOM 概 念 应 用 </py> 了 荆 

18 xp class=*infovy 使 用 getElementsyclassNaee 方 法 取得 元 素 内 容 c/py 执行 结果 
11 <p class="info">HTML5+CSS3+]avascript</p> 

12 <p id="exg"></p> 

13 <p id="ex1"></p> DeepStone 
14 <p id="ex2"></p> 


15 <script> DOM 要 多 应 用 
16 Var exInfo ~ document.getElementsByClassName("info"); // 取 短 class 是 info 的 内 容 使 用 eetElementByClassName 方 法 取得 元 素 内 容 

17 document,getElementById("exg").innerHT™ML = "p(9) = ”+ exInfof[e],innerHTML; HTMLstcssityaasai 

18 document.8BetElementById("exl").innerHTML = "p(1) = ”+ exInfo[l].innerHTL; 

19 。 document.8getElementById("ex2").innerHTML = "p(2) = ”+ exInfo[2].innerHTmL3 nes 

20 x/scripty CD 代 川 getElementByClaseName 广 沁 取 得 凡 玉 内 容 
21 </body> 2)= HTMLS-CSS3rJavaSeript 


22 </html> 


29-2-4 querySelectorAll() 和 querySelector() 


querySelectorAll0 这 个 方法 可 以 搜寻 与 特定 CSS 选择 器 属性 相同 的 元 素 ， 同 样 ， 由 于 可 能 会 有 
多 条 数据 符合 ， 所 以 返回 值 是 节点 串 行 元 素 。 
程序 实例 ch29_5.html : querySelectorAll0 方法 的 应 用 。 这 个 程序 会 返回 class 属性 值 是 “info” 的 
所 有 <p> 元 素 ， 并 列 出 这 些 内 容 。 


1 4ldoctype html> 

2 xhtmly 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29 5.html</title> 


6 </head> 

7 <body> 

3 《p>Dom 概 念 应 用 </p> 

9 xp class="info"> 使 用 querySelectorAl1 方 法 取得 元 素 内 容 </p> 一 / 士 

19 <p class="info">HTMLS+ACSS3+]Javascriptc/p> 执行 结 

11 xp id-"exg"></p> 

12 xp id="ex1"></p> 

13 《script> DOM 概 念 应 用 

14 var exInfo = document.queryselectorAll("p.info"); // 取得 class 是 info 的 <p> 内 : 使 用 quaryssleciocAtl 万 法 取得 元 素 内 容 
15 document.getElementById("ex9") ,innerHTML ="p(8) = ”+ exInfo[e] ,innerHTML; 

16 document.getElementById("ex1").innerHTML = "p(1) = " + exInfo[1].innerHTML; De 

17 </script> (0)= 使 用 querySelectorAll 方 法 取得 元 来 内 容 
18 </body> DU) Hr +08 tava 


19 </html> 

querySelector() 这 个 方法 可 用 于 搜寻 与 特定 CSS 选择 器 属性 相同 的 元 素 ， 同 时 也 是 第 一 条 数 
据 ， 所 以 返回 值 是 单一 元 素 。 
程序 实例 ch29_6.html : 重新 设计 ch29 5.html， 这 个 程序 会 获取 第 一 条 class 是 info 的 <p> 元 素 ， 
可 参考 程序 第 14 和 15 行 ， 以 及 第 一 条 <p> 元 素 ， 可 参考 程序 第 16 和 17 行 。 
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1 ldoctype htmly < 可 
2 <html> 执行 结果 


3 <head> 
4 <meta charset="utf-8"> F 


<titleych29_6.html</title> 
</head> DOM 概 念 应 用 


$ 
7 <body> Es 1 
区 使 用 querySelector 方 法 取得 元 素 内 容 
9 *p class="info"> 使 用 queryselector 方 法 取得 元 素 内 容 </py> 
19 <p class-"infor>HTHLS+CSS3+JavaScriptk/py> 

11 <p id="exgryc/py 

12 xp id="exl">c/p> 使 用 querySelector 方 法 取得 元 素 内 容 
13 <script> 

14 var exInfo = document.querySelector("p.info"); // 取得 等 一 笔 c1as5 是 info 的 <py 认 容 DOM 概 念 应 用 

15 document.getElementById("ex9") .innerHTNL = exTnfo-innerHTML; 

16 exInfo = document .queryselector("p"); // 取得 簇 一 笔 <p> 内 容 

17 document.getElementsyId("exl") ,innerHTRL = exInfo.innerHTmL; 

18 </scripty 

19 </bodyy 

20 </html> 


29-2-5 ” 双 层 条 件 的 存 取 功 能 


在 设计 网 页 时 也 会 碰 上 双 层 条 件 的 搜寻 ， 例 如 ， 想 要 存 取 所 有 id 是 mybook 的 <p> 元 素 ， 这 
时 可 以 使 用 前 几 节 介绍 的 getElementById() 和 getElementsByTagName() 方法 ， 返 回 值 也 是 节点 串 
行 元 素 。 
程序 实例 ch29_7.html : getElementById() 和 getElementsByTagName() 方法 的 综合 应 用 ， 列 出 id 是 
mybook 区 块 内 的 所 有 <p> 元 素 。 

a 执行 结果 


<head> 
《meta charset="utf-8"> 


1 

2 

3 

4 

| <title>ch29 7.html</title> 

6 </head> 我 的 作 
者 

8 
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<body> 
<div id="mybook"> 
9 《hl 我 的 著作 </h1> -个 人 的 极 境 旅行 南极 大 陆 北极 海 
16 ”<p> 一 个 人 的 极 境 旅行 南极 大 陆 北 极 海 </p> 
11 《<p> 迈 向 财神 之 路 台湾 麻将 必 胜 秘 边 </p> 迈 向 财神 之 路 台湾 麻将 必 胜 秘籍 
12 ¢/div> 
13 xp id="exe"></p> p(0)= 一 个 人 的 极 境 旅行 南极 大 陆 北 极 海 
14 <p id="ex1"></p> 隔 ea 
15 <script> BID = 迈 向 财神 之 路 台湾 麻将 必 胜 秘籍 
16 Var xbook = document.getElementById( "mybook"); // 取得 id 是 mybook 
17 var exInfo = xbook.getElementsByTagName("p"); // 取得 tag 是 p 
18 document getElementById( innerHTML = "p(®. exInfo[8].innerHTML; 
19 document.getElementById("ex1”).innerHTML = “p(1) + exInfo[1].innerHTML; 
26 </script> 
21 《/body> 
22 </html> 


29-2-6 ”返回 串 行 的 长 度 length 


从 29-2-2 节 起 我 们 知道 存 取 元 素 时 ， 常 会 返回 串 行 ， 另 外 ， 还 会 返回 串 行 长 度 ， 也 就 是 元 素 的 
数量 ， 这 个 数量 会 存在 length 属性 内 。 之 前 程序 实例 的 设计 方式 ， 皆 是 笔者 已 经 知道 有 几 条 数据 返 
回 的 设计 方式 ， 下 面 将 用 更 科学 方式 设计 程序 。 
程序 实例 ch29_8.html : 重新 设计 ch29 7.html， 这 个 程序 会 返回 数据 条 数 ， 同 时 用 for 循环 方式 将 
结果 放 入 <p id="exl">， 再 列 出 。 
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<ldoctype htmly /二 
<html> 执行 结果 


<head> 
<meta charset="utf-8"> 


1 

2 

3 

4 

和 <title>ch29 8.html</title> 

: 我 的 著作 
7 

8 


</head> 
<body> 2 i pn 
NS 个 人 的 极 境 旅行 南极 大 陆 北极 海 
9 ”<h1> 我 的 著作 </h1> 迈 向 财神 之 略 麻将 必 胜 秘 糖 
19 《p> 一 个 人 的 极 境 旅行 南极 大 陆 北 极 海 </p> 资料 条 数 -2 
11 ”4p> 迈 向 财神 之 路 麻将 必 往 秘籍 </p> 机 
12 </div> -个 人 的 极 境 旅行 南极 大 陆 北极 海 
13 <p id="ex@">¢/p> <1-- 预计 存放 数据 条 数 --> 迈 网 赌 神 之 路 麻将 必 胜 秘籍 
14 <p id="ex1">¢/p> 《<1-- 预计 存放 结果 数组 --> 
15 <script> 


16 -var i; // 索引 

27 var txt = ""; // 暂 存 字符 串 

18 var xbook = document.getElementById("mybook"); // 取得 id 是 mybook 
19 。 var exInfo = xbook,getElementsByTagName("p");  // 取得 tag 是 p 


20 var lengthTnfo = exInfo.length; // 返回 数据 数量 
21 for (i=0;i< lengthIinfo; itr ){ 

22 txt += exInfo[i].innerHTML + "<bry” 

23 } 


24 ”document,getElementById("exe"),innerHTHL =“ 资 料 条 数 = ”+ 这 3 
25 document . getElementById("ex1").innerHTML = txt; 

26 </script> 

27 </body> 

28 </html> 


29-2-7 元 素 上 下 文 属性 


元 素 文件 document 内 容 的 属性 有 下 列 3 种 。 

textContent : 内 容 ， 不 含 任何 标记 码 。 

innerHTML : 元 素 内 容 ， 含 子 标记 码 ， 但 是 不 含 本身 标 记 码 。 
outerHTML : 元 素 内 容 ， 含 子 标 记 码 ， 也 含 本 身 标记 码 。 

如 果 有 一 个 元 素 内 容 如 下 : 

<p>Marching onto the path of <b>Web Design Expert</b></p> 


则 上 述 3 个 属性 的 概念 与 内 容 分 别 如 下 图 所 示 。 
outerHTML 


textContent( 不 含 <b>) 


* 


<p>Marching onto the path of <b>Web Design Bet 


平 


innerHTML 


textContent : Marching onto the path of Web Design Expert 
innerHTML : Marching onto the path of <b>Web Design Expert</b> 
outerHTML : <p>Marching onto the path of <b>Web Design Expert</b></p> 
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程序 实例 ch29_9.html : 测试 上 述 document 属性 ， 单 击 任意 按钮 ， 系 统 将 列 出 相应 执行 结果 。 程 


序 第 22 行 是 用 于 测试 上 述 属性 的 <p> 元 素 。 


1 <!doctype html> 
2 <html> 


3 <head> 
<meta charset="utf-8"> 


Marching onto the path of Web Design Expert 


<title>ch29_9.html</title> 


lexiContent ] | innerHT™ML |[ outerHTML | 


<script> 
function showtextContent( ) { 
Var x = document.querySelector("p"); 
alert(x.textContent); 
» 
function showinnerHTML( ) { 
var x = document.querySelector(", 
alert(x. innerHTML); 
} 
function showouterHTML( ) { 
var x = document.querySelector("p"); 
alert(x.outerHTML); 
} 
</script> 
</head> 
<body> 
<p>Marching onto the path of <b>Web Design Expert</b></p> 
<button onclick="showtextContent( )">textContent</button> 
<button onclick="showinnerHTML( )">innerHTML</button> 
<button onclick="showouterHTML( )">outerHTML</button> 
</body> 
</html> 


29-2-8 元 素 大 小 与 位 置 


元 素 位 置 与 大 小 的 属性 如 下 (单位 是 px) : 
offsetHeight : 元 素 对 象 的 高 度 。 
offsetWidth : 元 素 对 象 的 宽度 。 


下 列 是 单 击 3 个 按钮 后 的 示范 输出 。 


疯 页 部 各 Ea 


a veing eno tepan oten pesign per 


卉 再 读 必 


A iat en ot owe cen oatats 


Ce 
Ea 


ee pe cheed rign open sn ps 


offsetLeft : 元 素 对 象 距离 左边 界 的 距离 。 
offsetTop : 元 素 对 象 距 离 上 边界 的 距离 。 


程序 实例 ch29_10.html : 列 出 所 插入 图 片 的 宽度 、 高 度 以 及 左边 界 、 右 边界 距离 。 程 序 执行 时 单 


击 “图 片 尺寸 位 置 ” 按 钮 ， 即 可 获得 结果 。 


<ldoctype htmly 
<htmly 
<heady 
<meta charset="utf-8"> 
<titleych29_16.htmle/titley 
<script> 
function BetwidthHeight( ) { 
var x = document.getElementById("pict"); 


document .BetElementById("size”") .innerHTML = “图 片 完 廊 ;“ + x.offsetWidth + “<br>"; 

document .BetElementById("size”) .innerHTML += “图 片 高 度 ; ”+ x.offsetHeight + “<br>"; 
document .getElementById("size”) .innerHTML +=“ 并 这 异 下 高; ”+ x.offsetleft + “<br>"; 
document ,BetElementById("size”) .innerHTML +=“ 上 边界 瑟 高 : ”+ x.offsetTop + “<br>"; 


/script> 

</head> 

<body> 

hl id="ex"> 委 国 c/ha> 

‘<p><ime id="pict" src="snou,jpg"></p> 

<button onclick-"getwidthHeight( )"> 图 片 尽 二 位 置 </button> 
<p id-"size"></p> 

‘</body> 

</html> 
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29-2-9 更 改 图 片 大 小 


在 HTML 相关 章节 介绍 过 可 以 使 用 height/width 属性 分 别 设 定 图 片 的 大 小 ， 其 实 也 可 以 直接 更 
改 这 两 个 属性 来 更 改 图 片 的 大 小 。 
程序 实例 ch29_11.html : 更 改 图 片 大 小 的 应 用 。 


<ldoctype html> 4 行 疆 ， 
es 执行 结果 


1 
2 
3 <head> 

4 <meta charset="utf-8"> 

EE <title>ch29 11.html</title> 

6 <script> 

2 function changeSsize( ) { 

8 document .getElementById("pict").width="200"; 

和 

16 </script> 

11 </head> 

12 <body> 

13 <h1l id="ex"> 吉 国 </hi> 

14 <p><img id="pict" src="snow.jpg” width="19e"></p> 
15 <button onclick="changesize( )"> 更 改 大 小 尺寸 </button> 
16 </body> 

17 </html> 


29-3 EETNITIET TT 


29-3-1 更 改 标题 或 段落 的 内 容 
最 简单 更 改 HTML 元 素 内 容 的 方法 是 使 用 下 列 语法 : 


document .getElementById ( id) .innerHTML = new HTML; 
程序 实例 ch29_12.html : 更 改 标题 内 容 的 实例 。 


1 <ldoctype html 二 Rs 
0 EE 于 单 击 “ 标 题 语言 转 
3 <head> » a a i 

4 <meta charset-"utf-e"> 换 ” 按 钮 ， 可 以 切换 的 标题 显示 。 
5 <titleych29 12.html</title> 
6 
7 
8 


<script> 


function changeText( ) { 深 

var x = document,getElementById("ex"); 厅 石 
9 if《 x.innerHTML ==“ 深 石 数 字 `) 
19 document .getElementById("ex") .innerHTML = "Deepstone™; i 
14 li 标题 语言 转换 
12 document .getElementById("ex") . innerHTML =“" 深 石 数字 "; 
13 必 
14 </script> 
15 </head> 
16 <body> 
17 ht "exs 深 数字 /hi> DeepStone 
18 <button onclick="changeText( )"> 标 题 语言 转换 </button> 
19 </body> 一 
28 </html> 标题 语言 转换 


349 


HTML5+CSS3 王者 归来 


程序 实例 ch29_13.html : 更 改 段落 内 容 的 应 用 。 


1 <ldoctype html> 
2 <htm> 

3 <head> 

4 <meta charset="utf-8"> 

5 <titleych29 13.html¢/title> 
6 

, 

8 


<script> 


function changeText( ) { 
var % = document.getElementById("ex"); 

9 十 ( x.innerHTML == "深度 学 习 ") 
19 document ,getElementById("ex").innerHTNL = “Deep Learning”; 
11 else 
12 document, getElementById("ex").innerHTNL = "深度 学 习 "; 和 
本 了 Deep Leaming 
14 </script> 
15 </head> 
16 <body> 


17 <p id="ex"> 深 度 学 习 </p> 

18 <button onclick="changeText( )"》 标 题 语言 转换 ¢/button> 
19 </body> 

28 </html> 


29-3-2 ”更改 属性 内 容 
HTML 元 素 更 改 属性 内 容 的 语法 如 下 : 


document .getElementById (id) .attribute = new value; 


程序 实例 ch29_14.html : 美女 与 企鹅 图 片 更 改 的 应 用 。 这 个 程序 的 重点 是 第 11 和 第 15 行 ， 可 以 
更 改 “sre” 属 性 的 内 容 ， 相 当 于 是 更 改 图 片 。 


1 <ldoctype html> 
2 <html> 执行 结 


3 《head> 

4 <meta charset="utf-8"> 关 女 | 企 热 
5 <title>ch29 14.html</title> | 

6 <script> 

7 function changeText( ) { | 

8 Var x = document .getElementById("ex"); | 

9 if( x.innerHTML == "美女 ") { | 

16 x.innerHTML =“ 企 鹅 "; | 

11 document. getElementById(“pict").src = “penguin. jpg"; 

12 | 

13 else { 

14 Xx.innerHTML = “美女 "; [Ez 
15 document.getElementByTd("pict").src = "icerain.png"; ee 

A 画 片 转换 | 

17 } 

18 </script> 

19 </head> 

26 <body> 


21 <p id="ex"> 美 女 </p> 

22 <p><img id="pict” src="icerain,.png” width="1060"></p> 
23 <button onclick-"changeText( )"> 图 片 转换 </button> 

24 </body> 

25 </html> 


DOM 节点 和 浏览 元 素 


在 DOM 规范 中 ， 它 和 BOM 一 样 可 用 树 状 结构 进行 解析 ， 这 一 节 的 重点 是 浏览 HTML 文件 组 
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成 的 树 状 结构 。 假 设 有 一 个 HTML 文件 内 容 如 下 : 
1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch29</title> 
6 </head> 
7 <body> 
8 <hl></h1> 
9 <p><a></a></p> 
10 <img> 
11 </body> 
12 </html> 


在 DOM 规范 中 每 一 个 元 素 可 以 视 为 一 个 节点 (Node)， 因 此 可 以 将 上 述 HTML 文件 转 成 下 列 
树 状 结构 形式 。 


el tor ~ 
29-4-1 ”认识 相关 名 词 


parentNode : 父 节 点 ， 例 如 <html> 是 <head> 或 <body> 的 父 节点 。 

firstChild : 第 一 个 子 节点 ， 例 如 <hl> 是 <body> 的 第 一 个 子 节点 ， 如 果 以 节点 串 行 处 理 ， 
索引 值 从 0 开始 ， 所 以 表达 方式 是 childNodes[0]。 另 外 ， 末 端 节点 的 结 点 内 容 算是 第 一 个 子 节点 

(firstChild) 内 容 ， 这 个 内 容 也 算 一 个 节点 ， 称 “文字 节点 (text node)”， 例 如 “ch29” 算 是 <title> 

节点 的 第 一 个 字 节 点 的 内 容 。 

lastChild : 最 后 一 个 子 节点 ， 例 如 <img> 是 <body> 最 后 一 个 子 节点 ， 如 果 以 节点 串 行 处 理 ， 由 于 
<img> 是 <body> 的 第 3 个 子 节点 ， 索 引 值 从 0 开始 ， 所 以 表达 方式 是 childNodes[2]。 

previousSibling : 前 一 个 兄弟 节点 ， 例 如 <hl> 是 <p> 的 前 一 个 兄弟 节点 。 

nextSibling : 下 一 个 兄弟 节点 ， 例 如 <img> 是 <p> 的 下 一 个 兄弟 节点 。 

nodeName : 节点 的 标记 名 称 。 

nodeValue : 节点 内 容 。 

上 述 childNodes[ ] 又 称 集合 对 象 ， 有 了 它 ， 任 一 个 节点 皆 可 进入 它 的 子 节点 ， 存 取 节点 以 及 节 


点 内 容 。 
29-4-2 存 取 节点 值 
之 前 元 素 内 容 的 取得 可 以 用 下 列 语句 实现 : 


var txt = document -getElementById ("ex" ) .innerHTML; 


入 
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虽然 node 是 节点 内 容 ， 但 是 想 使 用 节点 方式 取得 内 容 ， 需 使 用 如 下 方法 : 


var txt = document .getElementById ( "ex" ) .firstchild.nodeValue; 
或 
var txt = document .getElementById ( "ex" ) .firstchild.data; 


程序 实例 ch29_15.html : 认识 nodeName、nodeValue。 


1 ceope na 执行 结果 


3 <head> 
4 <meta charset="utf-8"> 
="info"> i 
: wt id="info">ch29_15.html</title: nodeName = TITLE 
7 function load( ) { firstChild.nodeValue = ch29_15.html 
8 var xl = document.getELementById("info") .nodeName; 
9 var x2 = document.getElementById("info"), firstChild. nodeValue; 
19 document .qetElementById("ex"), innerHTHL = "nodeName = ”+ x1 + 
11 "<br>" + "firstChitd ,nodeVvatue = ”+ x2; 
入 5 
13 </script> 
14 </head> 


15 <body onload="load( )"> 
16 <p id="ex"></p> 

17 </body> 

18 </html> 


程序 实例 ch29_16.html : childNodes[0] 的 应 用 。 这 个 程序 主要 是 介绍 使 用 节点 串 行 childNodes[ ] 
存 取 元 素 内 容 的 方法 。 


<ldoctype html> 
<html> 
<head> 

‘<meta charset="utf-8"> 


; <title>ch29 16.htnl</title> HTML 5+CSS3 HTML S+CSS3 
村 
8 


《script> 
function changeText( ) { 
var x1 = document .getElementById("exl"),childNodes[6].nodevaluei | 王者 归来 HTML $+CSS3 
1 document .getElementById("ex2") .innerHTML = x1; | 二 
11 </script> 
12 </head> 
13 <body> 
14 shl id="ex1">HTML 5+CSS3¢/h1> 
15 <p id="ex2"> 王 者 归来 </p> 
16 xbutton onclick="changeText( )">ChangeText</button> 
17 </body> 


18 </html> 
程序 实例 ch29_17.html : 重新 设计 ch29_16.html， 只 修改 第 9 行 。 
9 docunent.getElementById("ex2") .childNodes [0] .nodevatue = xl 


与 ch29 16.html 相同 。 
29-4-3 <body> 和 <html> 节点 


有 两 个 特别 的 节点 可 以 存 取 <body> 和 HTML 文件 本 体 的 内 容 。 

document.body : 存 取 <body> 元 素 内 所 有 的 内 容 。 

document.documentElement : 存 取 <html> 元 素 内 所 有 的 内 容 。 
程序 实例 ch29_18.html : 列 出 所 有 <body> 元 素 内 的 内 容 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch29_18.html</title> 
</head> 
<body> 
<h1>body 内 容 </h1> 
<script> 
alert(document .body. innerHTML); 
</script> 
</body> 
</html> 
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网 页 信息 


很 itooman' 
be 


slertdecument body innerHTML) 
crip 


Ce 


程序 实例 ch29_19.html : 列 出 所 有 <body> 元 素 内 的 内 容 。 


<!doctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>ch29_19.html</title> 

</head> 

<body> 

<h1>html 内 容 </h1> 

<script> 
alert(document.documentElement. innerHTML); 

</script> 

</body> 

</html> 


29-4-4 ”相同 父 节 点 的 史 弟 节点 内 容 


相关 节点 上 下 文 属性 如 下 : 


previousElementSibling.innerHTML : 前 一 个 节点 内 容 。 


nextElementSibling.innerHTML : 下 一 个 节点 内 容 。 


Nm -， Ea 


程序 实例 ch29_20.html : 列 出 项 目 列表 的 前 一 个 节点 内 容 的 应 用 。 这 个 程序 在 执行 时 ， 可 按 北 极 


海 、 中 


1 <ldoctype html> 


2 xhtmly 
3 «head> 

a ‘<meta charset="utf-8"> 

5 <title>ch29 20.html</title> 

6 <script> 

7 function fun1( ) { 

8 Var X = document,getElementById("ex1").previousElementsibling.innerHTML; 
9 alert(" 前 一 个 节点 内 容 = “+ x); 

318 } 

11 function fun2( ) { 

12 var x = document,getElementById("ex2"] ,previousElementSibling.innerHTML; 
3 alert(" 前 一 个 节点 内 容 = ”+ x); 

14 } 

15 function funa( ) { 

16 var x = document.getElementById("ex3")] .previousElementSibling.innerHTNL; 
1 alert(" 前 一 个 节点 内 容 = "+ x); 

18 } 

19 c/script> 

28 </head> 

21 <body> 

22 “hd> 我 的 旅游 经历 </hly 

23 <ul> 

Za。 《li 至极 大 陆 c/1iy 

25 <li id="ex1”onclick="fun4( )"> 北 航海 </1i> 

265 <li id-"ex2” onclick="fun2( )"y 中 国 西 苔 c/1iy 

27 <li id="ex3”onclick="fun3( )"> 蒙 二 </1i> 

28 </ul> 

29 </body> 

39 </html> 


国 西藏 、 蒙 古 的 顺序 列 出 它们 的 上 一 个 节点 内 容 。 


下 列 是 在 Chrome 中 的 执 


行 结果 。 


我 的 旅游 经 历 


南极 大 陆 
北极 海 ， 人 N 
中 国 西藏 
蒙古 


This page says: 
前 一 个 节点 内 容 = 南极 大 项 
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程序 实例 ch29_21.html : 列 出 项 目 列表 的 下 一 个 节点 内 容 的 应 用 。 这 个 程序 在 执行 时 ， 可 按 南极 
大 陆 、 北 极 海 、 中 国 西藏 的 顺序 列 出 它们 的 下 一 个 节点 内 容 。 


1 <ldoctype html> 

2 <chtml> 

3 chead> 

4 <meta charset-"utf-8"> 


5 <titleych29 21.html</title> 
6 <script> 

有 function fun1( ) { 

a Var x = document.getElementById("ex1").nextElementsibling. innerHrhL; 
9 alert(" 下 一 个 节点 内 容 = ”+ x); 

19 } 

11 function funz( ) { 

12 Var x = doacument.BetElementByrd("ex2") .nextElementsibling.innerHTMLy 
13 alert(" 下 一 个 节点 内 容 = ”+ xX); 

14 } 

15 function fun3( ) { 

16 Var x = document.getElementById("ex3").nextElementSibling. innerHTHL; 
bd alert(" 下 一 个 节点 内 容 = ”+ x); 

18 } 

19 c/script> 

29 </head> 

21 <body> 

22 <h1> 我 的 旅游 既 历 </h1> 

23 <ul> 


24 。 “li id="ex1”onclick="fun1( )"> 南 极 大 陆 </1i> 


25 -<li x2”onclick="fun2( )"> 北 家 海 </1i> 
26 。 <li id="ex3” onclick="fun3( )”? 中 国 西 意 c/1i> 
27 <1i> 杏 十 </1i> 

28 </ul> 

29 </body> 

30 </html> 


29-4-5 存 取 父 节点 


下 列 是 在 Chrome 中 的 执 
行 结果 。 


我 的 旅游 经 历 


。 南 极 大 陆 、 
。 北 极 海 
。 中 国 西藏 


。 蒙 百 


This page says: 
下 一 个 厄 点 内 容 = 北 杭 海 


“| 


存 取 父 节点 可 以 使 用 parentNode.nodeName， 可 参考 下 面 的 实例 。 
程序 实例 ch29_22.html : 重新 设计 ch29_21.html， 使 得 单 击 旅游 地 点 时 ， 列 出 父 节 点 。 


1 4ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>ch29 22.htmlc/titley 

6 <scripty 

于 function funl( ) { 

日 Var x = document ,BetElementsyId("exl") .parentuode,nodeNane3 


9 alert(" 父 节点 = "+ x); 
18 

11 function fun2( ) { 

12 Var x = document. getElementById( "ex2").parentNode. nodeName; 
13 alert(" 久 节点 = ”+ x); 

14 } 

15 function fun3( ) { 

16 Var x = document. getElementById( "ex3").parentNode. nodeName; 
17 alert(" 久 节点 = “+ x); 

18 

19 function funa( ) { 

28 Var x = docunent.getElementById("ex4").parenthode. nodeName; 
21 alert(" 父 节点 = “+ x); 

22 } 

23 <script> 

24 */head> 

25 <body> 

26 <h1> 我 的 旅游 经 历 </h1> 

27 <ul> 


28 xli id-"ex1”onclick="fun1( )"; 南 极 大 陆 </1i> 
29 <li id="ex2”onclick="fun2( "> 北极 海 </11> 
39 <li id="ex3”onclick="fun3( )"> 中 国正 若 (/1i> 
31 。 <li id-"ex4” onclick="fun4( )"; 蒙 二 /1i> 

32 </ul> 

33 </body> 

34 <*/html> 


的 执行 结果 。 不 论 单 击 那 一 个 地 点 ， 
皆 会 出 现下 方 下 图 所 示 的 对 话 框 。 


我 的 旅游 经 历 。 。 


南极 大 陆 

北极 海 

中 国 西藏 

蒙 百 - 


This page says: 
父 节点 = UL 
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光 再 司 建立 、 插 入 、 删 除 节点 


本 节 将 一 一 说 明 建立 、 插 入 、 删 除 节点 方面 的 知识 。 


29-5-1 建立 节点 


如 果 想 要 建立 节点 ， 首 先 要 建立 一 个 新 节点 ， 然 后 将 这 个 新 建 的 节点 插入 适当 的 父 元 素 内 ， 成 
为 这 个 父 元 素 的 一 个 子 元 素 。 建 立 一 个 新 节点 又 可 分 建立 节点 类 型 和 建立 节点 的 文字 节点 (可 想 成 
是 内 容 )， 最 后 再 使 用 appendChild0 将 节点 和 文字 节点 串 起 来 ， 可 参考 下 列 程序 代码 说 明 。 


var newNode = document.createElement (" 元素"); // newNode 是 新 建 节点 名 称 
var nodeText = document .createTextNode (" 内 容 "); // nodeText 是 文字 节点 
下 面 是 将 节点 和 文字 节点 串 起 来 的 语法 。 


newNode .appendChild (nodeText ) ; // 将 newNode 和 nodeText 串 起 来 


节点 建立 完成 后 ， 下 一 步 是 找寻 插入 元 素 ， 下 面 是 插入 id 为 “demo” 的 实例 。 


Var existParentNode = document .getElementById ("demo"); 


最 后 再 将 所 建 的 节点 插入 元 素 内 ， 一 般 会 插 到 最 后 面 成 为 该 元 素 的 lastChild。 
existParentNode.appendChild ( newNode ) ; 
程序 实例 ch29_23.html : 程序 将 制作 一 个 项 目 列表 ， 在 执行 时 若 单 击 Add 按钮 ， 可 以 在 项 目 列表 
后 面 增加 “台湾 大 学 ”项 。 


1 <ldoctype htul> 了 

2 <html> 执行 结果 

3 <head> 

4 <meta charset="utf-8"> | 

5 <xtitleych29_23.htmlc/titley 到 和 国生 湾 基 

6 <script> 中 

7 function addschool( ) { 中 国 台湾 著名 大 学 国 台湾 著名 大 学 
Var newode = document.createElement("11"); / 建立 节点 村 技 大 学 

9 var nodeText = document.createTextNode(" 合 湾 大 学 "); 人 输入 文字 节点 内 雁 科技 大 学 

10 newNode.appendChild(nodeText); 文字 节点 放 入 li 节点 华 大 。 台湾 清华 大 学 

1 Var existparenthode = document.getElementById("demo"); “ 预计 放 入 率 行 父 节点 | 

12 existparentNode.appendchild(newode); 揪 入 节点 


} 
14 </script> 
15 </head> 
16 xbodyy 
17 <h1> 中 国 台湾 著名 大 学 </hi> 
18 <ul id="demo"> 
19 《<14 id-"exl"y 明 志 科 技 大 学 c/1iy 
29 <li id="ex2"> 台 湾 科技 大 学 c/1iy 
21 <kli id="ex3") 台 湾 清华 大 学 </1i> 
22 </ul> 
23 <button onclick="addschool( )">add</button> 
24 </body> 
25 </html> 


29-5-2 将 节点 插入 特定 位 置 
将 节点 插入 特定 位 置 的 方法 如 下 : 


node.insertBefore (newNode, child); 


node 是 父 节 点 ，newNode 是 新 建 节 点 ，child 是 目标 节点 ，newNode 会 插入 在 node 父 节点 下 ， 
child 节点 前 。 
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程序 实例 ch29_24.html : 重新 设计 ch29 23.html， 当 单 击 Add 按钮 时 ， 会 在 “台湾 清华 大 学 ”上 
方 插入 “台湾 大 学 ”。 这 个 程序 与 ch29 3.html 相 较 ， 修 改 了 第 12 行 ， 这 行 代码 是 先 取得 目标 节点 ， 
第 13 行 则 是 将 新 建 节点 插入 目标 节点 前 。 


7 function addschool( ) { 3 
日 Var newode = docunent.createElement("11"); 建立 节点 执行 结果 
9 var nodeText = document -createTextode(" 台 吉大 地")3 WM 葵 入 文子 节点 具 容 


18 newhode.appendchild(nodeText); 1 A 

nu var existparentNode = document.getElementayId("demo"); // 模 计 放 入 率 行 

了 2 var child = docunent.getElementById("exa"); 1 人 中 国 台 湾 著 名 大 学 中 台湾 着 名 大 学 | 
13 existparentNode.insertBefore(newhNode,child); // 执行 在 child 节 点 前 插入 

14 } 罗技 大 学 和 


Fi “在 海 


29-5-3 删除 节点 


DOM 删除 节点 时 ， 一 定 要 指出 是 删除 哪 一 个 父 节点 的 子 节点 。 可 以 使 用 removeChild0 方法 执 
行 删除 操作 ， 语 法 格式 如 下 : 

parentNode.removeChild (childNode ); 

上 述 语句 相当 于 删除 parentNode 的 子 节点 childNode。 
程序 实例 ch29_25.html : 在 项 目 列表 删除 节点 的 应 用 。 这 个 程序 执行 时 若 单 击 Delete 按钮 ， 可 以 
删除 “台湾 清华 大 学 ”项 目 。 


1 《ldoctype html> 


2 <html> 
3 <head> | 
4 <meta charset="utf-8"> = | 
全 由 公 
5 <title>ch29 25.html</title> 中 国 台湾 著名 大 学 “中国 台 湾 著名 大 学 
6 <script> ~ 
7 function delschool( ) { ~ i 
8 Var parent = document.getElementById("demo"); // 取得 父 节 点 
9 var child = document .getElementById("ex3"); ”// 预计 删除 的 子 节点 
10 parent.removeChild(child); // 删除 parent 的 于 节点 child | 天 
11 } 
12 c/script> 
13 </head> 
14 <body> 


15 <h1> 中 国 台 湾 著 名 大 学 </hi> 
16 <ul id-="demo"> 


17 <li id "> 明志 科技 大 学 </1i> 

18 li id > 台湾 科技 大 学 </1i> 

19 <li id-"ex3"> 台 湾 清华 大 学 </1i> 

29 </ul> 

21 <button onclick="delschool( )">Delete</button> 
22 </body> 

23 </html> 


29-5-4 更 换 节 点 


DOM 更 换 节点 时 ， 一 定 要 指出 是 更 换 哪 一 个 父 节点 的 子 节点 。 可 以 使 用 replaceChild0 方法 执 
行 更 换 操 作 ， 语 法 格式 如 下 : 

parentNode.replaceChild (newNode,childNode ) ; 

上 述 语句 相当 于 使 用 newNode 更 换 parentNode 的 子 节点 childNode。 
程序 实例 ch29_26.html : 在 项 目 列表 更 换 节 点 的 应 用 。 这 个 程序 执行 时 若 单 击 Replace 按钮 ， 可 以 
用 “台湾 大 学 ”取代 “台湾 清华 大 学 ”项 目 。 
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1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 


中 国 台湾 著名 大 学 


5 <title>ch29 26.html</title> 

6 <script> 

7 function addschool( ) { 明 ， 明志 科 技 大 学 

8 var newNode = document.createElement("1i"); // 建立 节点 TE 人 

9 var nodeText = document,createTexthode(" 台 湾 大 学 "); 。。// 输入 文字 证 点 诊 容 人 SR 

19 newNode .appendchild(nodeText); /7/ 文字 节点 放 入 1i 节 点 Bute. 

11 var parent = document .getElementById("demo" 4/ 巴 计 放 入 串 行 父 节点 my 
12 var child = document .getElementById("ex3"); // 预计 要 更 痪 的 节点 

13 parent.replaceChild(newhlode, child); // 执行 更 欣 

4 } 


15 </script> 


29 <li id-"ex1"> 明 志 科技 大 学 </1i> 


24 <li x2"> 台 湾 科技 大 学 </1i> 

22 <li id="ex3"> 台 湾 清华 大 学 c/1i> 

23 </ul> 

24 <button onclick="addschool( )">Replace</button> 
25 </body> 

26 </html> 


4 DOM 与 CSS 


HTML DOM 允许 使 用 JavaScript 更 改 HTML 文件 的 CSS 样式 表 的 属性 内 容 ， 这 样 可 以 让 整个 
网 页 设计 变 得 更 活泼 多 样 ， 语 法 格式 如 下 : 


document .getElementById (id) . style.property = new-style; 


下 面 是 程序 设计 时 常用 的 属性 : 
backgroundcolor : 背景 色 fontFamily : 字体 
backgroundimage : 图 案 fontSize : 字号 
color : 前 景色 textAlign : 对 齐 方 式 
visibility : 是 否 显示 

程序 实例 ch29_27.html : 单 击 按钮 可 以 更 改 Coffee 字样 的 颜色 。 


1 <!doctype html> 


2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29_27.html</title> Coffee 

6 <script> 

7 function colorBlue( ) { Bhue | Reg || Defout 
8 document.getElementById("ex").style.color = "blue”; 

9 } 

10 function colorRed( ) { 

11 document.getElementById("ex").style.color = "red"; Coffee 

12 } 

13 function colorBlack( ) { 

14 document .getElementById("ex").style.color = "black"; | Be | Reg | Rela, 
15 } 

16 </script> 

17 </head> 

18 <body> Coffee 

19 <hl id="ex">Coffee</h1l> 

29 <button onclick="colorBlue( )">Blue</button> Blve || Red || Default 


21 <button onclick="colorRed( )">Red</button> 

22 <button onclick="colorBlack( )">Default</button> 
23 </body> 

24 </html> 
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程序 实例 ch29_28.html : 单 击 按钮 可 以 更 改 Coffee 字体 的 背景 颜色 。 


1 <ldoctype html> 
2 <htm> 

3 <head> 

4 kmeta charset="utf-a"> 
5 <titlexch29 28.html</title> 
6 <script> 
这 
a 


function colorYellow( ) { 


document .getElementById("ex").style.backgroundcolor = "yellow"; 。 // 背 系 色 黄 色 Lt Ap Del 
= 
19 function coloraqua( ) { 
11 document .getElementById("ex").style,backgroundColor = “aqua™; // 背景 色 水 音色 
= 全 Coffe 
13 function colorwhite( ) { 
14 document .getElementById( "ex").style.backgroundcolor = “White"; 。 // 背景 色白 色 
- 8 ee ee Yelow | [Aa | en 
16 -</script> 
17 </head> 
18 <body> 


19 xcha id-"ex">coffeec/h1> [ery ,| 
29 <button onclick="coloryellow( )">Yellowc/button> 

21 xbutton onclick="colorAqua( )">Aquac/button> 
22 <button onclick="colorwhite( )">Default</button> Voliow || Aque | Detott 


23 </body> 
24 </html> 


程序 实例 ch29_29.html : 单 击 按钮 可 以 更 改 Coffee 字样 的 背景 颜色 ， 并 且 黄 色 底 时 字号 是 40px， 
水 蓝 色 时 是 30px， 白 色 时 是 20px。 


1 <ldoctype html> 


2 <htnl> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29 29,html¢/title> 

5。 kseripty Coffee 

7 。 function coloryellow4e( ) { 

a document .getElementById( "ex").style.backgroundColor = "yellow"; ”// 背 入 全 黄 半 Yellow | Aqua | Defaukt 
日 document .getElementById( “ex"). style. fontSize = “a9px”; 

10 } 

11 function coloraquaae( ) { 

12 document .getElementById("ex").style.backgroundcolor = "aqua"; 。 // 背 蕴 色 水 赣 色 
Me Tem 
14 } 

15 function colorwhiteze( ) { Yetow | [Aqua [pear 
16 document getElementById( "ex"),style.backgroundcolor = “white";  // 菠 半 色 语 色 

17 document ,getElementById( “ex"). style, fontSize = “29px"3 

18 } = = 
19 </scripty 

21 xbody> 

22 hi td-"exrycoffeec/hly vobow | [Aas] Loot 


23 <button onclick="colorYellowa9( )">Yellow</button> 
24 <button onclick="colorAquaa9( )"yaquac/buttony 

25 《<button onclick="colorwhite28( )">whitec/button> 
26 </body> 

27 </html> 


程序 实例 ch29_30.html : 单 击 按钮 可 以 更 改 Coffee 字样 的 背景 颜色 ， 同 时 字符 串 将 居中 对 齐 。 


1 xldoctype html> 4 二/ 士 
2 xhtml> 执行 结 
3 <head> 


<meta charset="utf-8"> 


4 
5 <title>ch29_39.html</title> 十 ER 
6 <script> 

7 

a 


function coloryellow( ) { 


document .BetElementByTd("ex") -style.backgroundcolor = "yellow"; ” // 背景 色 黄 色 Yetow | | Aaua |[ Detaun | 
9 document .BetElementByTd("ex") .style,textAlign = “center "3 171 居中 对 齐 
10 上 
11 function coloraqua( ) { 一 
12 document .getElementeyId("ex") .style.backgroundcolor = “aqua"; /背景 水 至 色 
a [| 
WW 
15 function coloruhite( ) { 
16 document .getElementeyId( "ex") .style.backgroundcolor = “white"; 。 // 背景 色白 色 ites eu] petuts] 
17 document .getElementeyId( “ex").style. textalign = “center'3 // 居中 对 齐 
全 :和 
19 。 </script> 
2 </head> 
21 <body> Coffee 
22 <hl id-"ex">Coffeec/hi> 
23 <button onclick="colorYellow( )">Yellow</button> Yelow | Aqua | Detaun 


24 <button onclick="coloraqua( )">Aqua</button> 

25 <button onclick="coloruhite( )">Default</button> 
25 </body> 

27 </html> 
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辽 本 和 HTML 的 集合 对 象 


HTML DOM 提供 了 一 些 特别 的 属性 可 以 存 取 集 合 〈collection) 对 象 ， 它 的 语法 格式 如 下 : 
document.images : 适合 配合 <img> 标记 使 用 。 

document.forms : 适合 配合 <form> 标记 使 用 。 

document.anchors : 适合 配合 有 name 属性 的 <a> 标记 使 用 ， 不 过 name 属性 HTML5 不 支持 。 
document.links : 适合 配合 有 href 属性 的 <a> 标记 使 用 。 

使 用 上 述 对 象 时 ， 有 下 列 属性 可 用 。 

length : <img> 的 对 象 数量 。 

有 下 列 方法 可 用 。 

[index] : 返回 <img> 对 象 的 特定 索引 值 。 

item (index) : 返回 特定 索引 值 的 <img> 对 象 。 

namedItem (id) : 返回 特定 id 的 <img> 对 象 。 


29-7-1 document.images 
这 个 对 象 可 以 返回 整个 HTML 文件 所 有 <img> 元 素 的 集合 ， 需 留意 ， 其 中 <input> 元 素 type 属 


性 是 “image” 的 不 属于 此 集合 。 
程序 实例 ch29_31.html : 传 回 图 片 对 象 数量 。 

Sa 

3 <head> 

4 ‘<meta charset="utf-8"> | a 

上 3 <title>ch29_31,html</title> 

和 <script> 

; 

程序 实例 ch29_32.html : 使 用 3 种 方法 ， 列 出 图 片 的 URL 信息 。 


function piccount( ) { 


var count = document .images.length; // 计算 cimg> 数 量 
9 document .getElementById("num") .innerHTML = "<img> 数 量 是 =- + count; 
10 】} 
11 </script> 
12 ¢/head> 
13 <body> 


14 <img id="pict1" src="icerain.png" width="100"> 
15 <img id-"pict2" src-"penguin,jpe" width-"100"> 
16 <img id="pict3" src="snow, jpg” width="100"> 
17 <br> 

18 <button onclick="piccount( )">ok</button> 

19 <p id-"num"yc/py 

29 </body> 

21 </html> 


1 xldoctype htnl> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29 32.html</title> 

6 <script> 

7 function picCount( ) { 

8 var xl = document.images[6] .src; 


9 var x2 = document.images.item(1).src; 
19 var x3 = document.images.namedItem("pict3") .src3 

11 document.getElementById("url").innerHTHL = "图片 1 URL = ”+ x1+ 
12 “<bry”+ "图 片 2 URL = ”+ x2 + “<br>”+ "图 片 3 URL = “4+ x3 3 


359 


360 


HTML5+CSS3 王者 归来 
3 } 

14 </script> 

15 </head> 


penguin. jpg Width= 109"> 


21 <button onclick="picCount( )">GetURL</button> 
22 <p id="url"></p> 

23 </body> 

24 </html> 


图 片 1 URL ec et 
图 片 2 URL = file://DJHTMLS+CSS3ch2 
图 片 3 URL = file://D/HTMLS+CSS3/ch29/snow; ra 


程序 实例 ch29_33.html : 为 第 一 张 图 片 加 上 蓝 色 dotted 线 ， 厚 度 是 Bier] 


<!doctype html> | 执行 结果 | 


<html> 
<head> 


1 

2 

3 

4 <meta charset="utf-8"> L 

5 <title>ch29_33.html</title> 

6 <script> 

7 function dotBorder( ) { 

8 var x = document. images[9].style.border = "3px dotted blue"; 
9 | EE 


19 </script> 


11 </head> 


17 <button onclick="dotBorder( )">Dotted</button> 
18 <p id="url"></p> 

19 </body> 

20 </html> 


29-7-2 document.forms 


这 个 对 象 可 以 返回 整个 HTML 文件 所 有 <form> 元 素 的 集合 。 
程序 实例 ch29_34.html : 列 出 form 的 数量 和 id 属性 值 。 


<ldoctype html> Z 二 4 士 
执行 结 


<head> 


<meta charset="utf-8"> | 和: 站 和 :KHing 
</head> | 电话 :5538989969 
<body> 请 接 执 行 乌 | 请 按 执 行家 


<form id="info" action="cgi-bin/getinfo.php” method="get"> 


于 
全 
3 
4 
<title>ch29 34.html</title> 一 一 一 一 一 一 
6 
对 
8 
9 


<p> 姓 名 ; <input type: JK Hung"></p> 
10 《p> 电话 ; <input type="tel" name="phone” value="9928999999"></p> 
11 </form> 
12 <p> 请 技 执行 钮 </p> 
13 <button onclick="getLength( )"> 技 行 </button> 
14 <p id="ex"></p> 
15 <script> 
16 function getLlength( ) { 


17 var len = docunent.forms.length; // form 元 素数 量 

18 var xId = document.forms[e].id; // form id 

19 document ,getElementById("ex") .innerHTML = “form 元 紊 数量 " + len + 
20 "tbr2" + "form id = ”+ XId; 

2 

22 </script> 

23 </body> 

24 </html> 
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程序 实例 ch29_35.html : 将 form 内 每 一 个 元 素 内 容 列 出 来 。 


<ldoctype html> 


1 
2 <html> 

3 <head> 

4 <meta charset=—"utf-8"> 

5 <title>ch29 35.html</title> 姓名 :IK Hung ] 
5 S/head> | 
7 <body> 

8 En 


| 

| 
<form id-"info” action-"cgi-bin/getinfo.php" nethod-"get”> 

9 <p> 姓名 : cinput type="text” name="name” value="JK Hung"></p> | 

| 


19 。 “py 电话 : <input type="tel” name="phone” value="6928999999"></p> 
11 <pysinput type="submit” value=" 测 斌 "></p> 

12 </form> 

13 p> 请 按 执行 钥 (/p> 
14 <button onclick="getInput( )"> 执 行 C/button> 


15 <p id="ex"></p> 《<1-- 预计 存放 结果 数组 --> 


16 <script> 

17 function getInput( ) { 

18 var i; 7/ 索引 

19 var txt = ""; // 暂 存 字符 率 

20 var str = document,forms["info"]; // 取 的 id 是 info 的 form 
21 var lenForm = str,length; // 传 加 数据 数量 


22 for ( i = 8; i < lenForm; it+ ) { 

23 txt += str.elements[i].value + "cbr>" 

24 } 

25 document.getElementById("ex").innerHT™ML = txt; 
26 } 

27 </script> 

28 </body> 

29 </html> 


29-7-3 document.links 


这 个 对 象 可 返回 有 href 属性 的 <a> 标记 的 元 素 集合 。 


外 名: KHung 


电话: 0928999999 


3 
请 按 执行 乌 


执行 


程序 实例 ch29_36.html : 可 以 计算 有 href 属性 的 <a> 标记 的 元 素数 量 ， 同 时 将 索引 为 0 的 超 链接 


用 蓝 色 3px 实 线 框 住 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29 36,.html</title> 
6 <script> 

7 function myfun( ) { 

8 


var x = document.links.length; 


9 document ,getElementById("ex") .innerHTML = "Links 数 重 = ”+ Xx; 
10 document ,links[6] ,style.border = "3px solid blue" 

11 } 

12 </script> 

13 </head> 

14 <body> 


15 <p><a href="ch29_1.html">ch29 1.html</a></p> 
16 xpy<a href="ch29_2,html">ch29 2.html</a>c/p> 
17 xbutton onclick="myfun( )") 浆 行 c/button> 

18 <p id="ex"></p> 

19 </body> 

20 </html> 


以 "总 局 DOM 事件 属性 


在 10-2 节 笔 者 列 出 了 HTML 所 有 事件 属性 的 列表 ，HTML 的 DOM 允许 针对 HTML 事件 发 
生 时 ， 使 用 JavaScript 执行 某 些 特定 工作 。 其 实 本 书 前 几 章 节 也 陆续 介绍 一 些 事件 属性 了 ， 例 如 
HTML 文件 下 载 时 的 onload 事件 、 单 击 某 元 素 的 onclick 事件 等 。 这 一 节 读 者 可 以 学 到 更 多 事件 的 


处 理 知 识 。 
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29-8-1 onload 与 onunload 事件 


onload 事件 是 指 HTML 文件 加 载 时 产生 的 事件 ， 之 前 已 有 介绍 ， 这 一 节 的 重点 是 onunload。 当 
目前 HTML 页 面 被 卸载 时 ， 会 发 生 onunload 事件 。 下 列 是 常见 的 onunload 事件 被 触发 的 时 机 。 
口 ” 浏 览 器 被 关闭 。 
口 “ 单 击 超 链接 。 
口 “提交 表单 。 
口 ” 重 载 ( reload ) 网 页 ， 此 时 也 会 触发 onunload 事件 。 
基本 语法 格式 如 下 : 
<element onunload="myFun ( ) "> 
程序 实例 ch29_37.html : onunload 事件 的 应 用 。 这 个 事件 被 触发 时 ， 会 输出 “下 回 再 见 ”的 对 话 框 。 


1 <!doctype html> 15 </body> 


2 <html> 16 </html> 

3 <head> 

4 <meta charset="utf-8"> Z 一 

5 <title>ch29 37.html</title> 执行 结果 

6 <script> 

7 function myFun( ) { ”从 -图 -中 曾 - 四 网 页 信息 攻 到 
8 alert(" 下 回 再 见 "); | | 


9 } 3 | 

10 </script> 欢迎 光临 息 Tama 

11 </head> 请 按 Fs 可 以 重 载 网 页 

12 <body onunload="myFun( )"> 

13 <h1> 欢 迎 光临 </h1> Re% », 
14 <p> 请 按 F5 可 以 重 载 网 页 </p> 


29-8-2 onchange 事件 


onchange 事件 是 指 元 素 内 容 更 改 时 会 被 触发 ， 一 般 输入 字段 若 有 内 容 改 变 时 ， 会 触发 此 事件 ， 
它 的 基本 语法 格式 如 下 : 


<element onchange="myFun ( jes 


程序 实例 ch29_38.html : onchange 事件 的 应 用 。 这 个 程序 如 果 更 改 了 默认 输入 字段 的 数据 ， 并 单 
击 其 他 区 域 后 ， 将 显示 提示 出 对 话 框 。 


1 sldoctype html> 
2 chtml> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29 38.html</titley 

6 <script> 

7 function myFun( txt ) { 

a alert("Warning: 账 号 内 容 被 更 改 : ”+ txt); 


19 </script> 
11 </head> 

12 <body> 

13 <p> 请 输入 账号 </p> 

14 Enter Account: 

15 <input type="text” name="account" value="DeepStone” onchange="myFun(this.value)"> 


16 </body> 
17 </html> 
执行 结果 下 列 是 在 Chrome 中 的 执行 结果 。 
请 注入 际 号 请 注入 几 号 This page Says 
nner evn: rs i = es 
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这 个 程序 的 第 15 行使 用 了 this,“this .value” 是 指 新 输入 的 内 容 。 
程序 实例 ch29_39.html : onchange 的 应 用 。 这 个 程序 在 执行 时 ， 如 果 有 新 选单 项 目 会 出 现 对 话 


框 ， 列 出 新 选项 内 容 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

对 <title>ch29 39.html</title> 

6 <script> 

7 function myEvent( ) { 

8 var txt = document ,getElementById("trip").value; 
9 alert(" 你 的 选择 是 : ”+ txt ); 


有 
</script> 
</head> 
<body> 
<p》 请 输入 旅游 地 点 </p> 
<select id="trip” onchange="myEvent( )"> 
《<option value=" 北 极 海 "> 北极 海 


29-8-3 onclick 事件 


本 书 叙述 至 此 onclick 事件 已 经 有 许多 实例 了 ， 


发 这 个 事件 。 本 节 将 介绍 该 事件 的 其 他 应 用 实例 ， 


<element onclick="myFun ( ) "> 


<option value=" 南 极 大 陆 "> 南 极 大 陆 
<option value=" 冰 岛 "> 冰 岛 
</select> 
28 <p> 当 选择 新 地 点 时 会 般 发 事件 </p> 
</body> 
</html> 


下 列 是 在 Chrome 中 的 执行 


大 部 分 是 配合 按钮 来 介绍 ， 当 单 击 按钮 时 ， 会 触 


它 的 语法 格式 如 下 : 


程序 实例 ch29_40.html : 单 击 字符 串 元 素 可 以 更 改 字符 串 内 容 。 


1 <ldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
多 <title>ch29 40.html</title> 
6 <script> 
巴 function myText( id ) { 
8 id.innerHTML = "Deepstone™; 
9 
</script> 
</head> 
<body> 
<h1 onclick="myText( this )"> 深 石 数字 </h1i> 
《p> 当 单 击 标题 时 会 触发 事 更 改 字符 中 内 容 </p> 
</body> 
</html> 


DeepStone 


当 单 击 标题 时 会 骨 发 事件 更 改 字符 趾 内 容 


当 单 击 标 题 时 会 触发 事件 更 改 字符 申 内 容 


程序 实例 ch29_41.html : 在 单 击 标题 时 ， 会 更 改 标 题 颜色 为 蓝 色 。 


1 《ldoctype html> 
2 <html> 
3 《head> 
4 <meta charset="utf-8"> 
5 <title>ch29 41.html</title> 
6 <script> 
7 function myText( id,txtColor ) { 
8 id. style.color = txtcolor; 
9 和 
</script> 
</head> 
<body> 
<hl onclick="myText( this，'blue”)"> 深 石 数字 </h1> 
《p> 当 单 击 标题 时 会 触发 事件 更 改 文字 颜色 </p> 
</body> 
</html> 


深 石 数字 


当 单 击 标题 时 会 触发 事件 时 更 改 文字 部 色 


当 单 击 标题 时 会 条 发 事件 时 更 改 文字 组 色 


“4 


HTML5+CSS3 王者 归来 


29-8-4 ondblclick 事件 
ondblclick 事件 是 指 双击 对 象 时 产生 的 事件 ， 它 的 语法 格式 如 下 : 


<element ondblclick="myFun ( ) "> 


序 实 例 ch29_42.html : 双击 标题 可 以 将 标题 颜色 改 成 蓝 色 。 


前 


<ldoctype htnl> 执行 结果 


<html> 
<head> 


1 
EF; 

3 i 
4 <meta charset="utf-8"> < | 
5 <title>ch29 42.html</title> 殿 石 数字 >》 深 石 数字 
6 

7 

8 


会 币 发 事件 时 会 偶发 事 件 


<script> 台中 事件 时 会 触发 事件 | 当 妈 击 标 

function myText( id,txtcolor ) { 
id,style,color = txtColor; 

9 F 

10 </script> 

11 </head> 

12 <body> 

13 <h1 ondblclick="myText( this，"'blue”)"> 深 石 数位 </h1> 

14 “py> 当 双击 标题 时 会 触发 事件 时 会 触发 事件 </p> 

15 </body> 

16 </html> 


29-8-5 onmouseover 和 onmouseout 事件 


当 鼠 标 指针 移 至 某 对 象 处 时 会 产生 onmouseover 事件 ， 当 鼠标 指针 离开 某 对 象 处 时 会 产生 
onmouseout 事件 ， 它 们 的 语法 格式 如 下 : 


<element onmouseover="myFun ( ) "> 
<element onmouseout="myFun ( ) "> 


程序 实例 ch29_43.html : 原先 图 片 宽 度 是 100px， 当 鼠标 指针 移 至 图 片 处 时 ， 可 以 让 图 片 宽度 放大 
至 200px， 离 开 时 图 片 恢复 宽度 为 100px。 
i 执行 结果 


3 <head> 
4 <meta charset="utf-8"> 


5 <titleych29 43.htm</title> 
5 <script> 

7 function large( id ) { 

8 id.style.width="206px"; 
9 } 

19 function normal( id ) { 


1 id.style.width="190px"; 


13 <¢/script> 
14 </head> 

15 <body> 

16 《p> 当归 标 经 过 或 高 开会 触发 事件 </p> 

17 <img src="hung.jpg” width="100" onmouseover="large(this)” onmouseout="normal(this)"> 
18 </body> 

19 </html> 


29-8-6 onmousedown 和 onmouseup 事件 


当 单 击 鼠 标 左 键 时 会 产生 onclick 事件 。 其 实 当 按 住 鼠标 左 键 时 会 先 产 生 onmousedown 事件 ， 
放 开 鼠标 按键 时 会 产生 onmouseup 事件 ， 然 后 才 产 生 onclick 事件 。 本 节 将 讨论 onmousedown 和 
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onmouseup 事件 ， 它们 的 语法 格式 如 下 了 


<element onmouseover="myFun ( ) mx 


<element onmouseout="myFun ms 
程序 实例 ch29_44.html : 重新 设计 ch29_43.html， 改 成 在 图 片 处 按 住 鼠 标 左 键 处 时 ， 图 片 宽 度 会 
改 成 200px， 放 开 鼠 标 按键 后 图 片 宽度 恢复 成 100px。 


1 xldoctype html> 3 
2 <htnl> 执行 结果 


3 <head> 


5 

时 function large( id ) { 

8 id.style.width="268px"; ) 
9 站 

1 function normal( id ) { 

11 id, style.width="108px"; 

3 

3 </script> 

14 </head> 

15 <body> 


16 “py> 当 在 图 片 内 技 住 忆 标 左 键 图 片 可 以 放大 </py 
17 <ime srcr"hung,jpe” width-"100" onmousedown="large(this)" onmouseup="normal(this)"> 


18 </body> 
19 </html> 


29-8-7 在 JavaScript 内 建立 事件 


目前 所 有 看 到 的 事件 ， 均 是 在 元 素 内 增加 事件 属性 ， 当 此 元 素 被 触发 时 ， 会 执行 元 素 内 设 定 的 
函数 。 其 实 我 们 也 可 以 在 元 素 中 不 设 定 事件 属性 ， 改 在 <script> 内 设 定 。 
程序 实例 ch29_45.html : 在 JavaScript 内 建立 事件 的 应 用 。 这 个 程序 的 重点 在 第 9 和 第 12 行 ， 
过 去 我 们 会 在 建立 按钮 时 ， 自 动 加 上 onclick 事件 属性 ， 本 例 我 们 在 <script> 阶段 第 12 行 才 建 立 


onclick 事件 去 执行 showTime()。 


1 xldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29 45,html</title> 

6 </head> 

7 <body> 

8 <p> 单 击 “ 时 间 ” 按 钮 可 以 显示 时 间 </p> 

9 <button id="myTime"> 时 间 </button> 

19 <p id="ex"></p> 

11 <script> 

12 document .getElementById("myTime").onclick = showTime; ”// 设 定单 击 “时间” 按钮 列 出 目前 时 间 
13 function showTime() { 

14 document .getElementById("ex") .innerHTML = Date(); 

15 } 

16 </script> 

17 </body> 

18 </html> 


行 疆 本 
单 击 “ 时 间 ” 按 钮 可 以 显示 时 间 单 击 “ 时 间 ” 按 钮 可 以 显示 时 间 
时 间 | (可 ) 


Sun Aug 27 2017 17:38:55 GMT+0800 
(北京 时 间 ) ~ 
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程序 实例 ch29_46.html : 更 改 窗口 背景 颜色 的 应 用 ， 执 行程 序 时 只 要 单 击 窗口 背景 ， 窗 口 背 景色 将 
改 为 水 蓝 色 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch29 46.html</title> 

6 <script> 

7 window.onclick = myBackground; // 设 定单 击 窗口 区 可 启动 事件 

8 function myBackground( ) { 

9 document .getElementsByTagName( "body")[9]. style.backgroundCcolor = "aqua”™; 
11 </script> 

12 </head> 

13 <body> 

14 <h1> 深 石 数字 </h1> 

15 “py> 当 单 击 窗口 空白 区 会 触发 事件 更 改 背景 颜色 </p> 

16 </body> 

17 </html> 


执行 结 


当 单 击 窗口 空白 区 会 触发 事件 更 改 背 景 颜色 | 


上 述 程序 第 7 行 是 设 定 当 窗口 对 象 被 单 击 时 执行 myBackground() 函数 。 


习题 

1. 请 重新 设计 ch29_11.html， 如 果 图 片 宽度 是 100px， 请 将 按钮 名 称 改 为 “放大 图 片 ” 单 击 可 将 图 
片 宽度 改 成 200px ; 如 果 图 片 宽度 是 200px， 请 将 按钮 名 称 改 为 “缩小 图 片 ” 单 击 可 将 图 片 宽度 
改 成 100px。 

2. 请 参考 ch29_27.html 和 ch29_28.html， 将 功能 组 合 ， 同 时 将 前 景 和 背景 颜色 扩 增 至 5 种 。 

3. 请 参考 ch29 31.html 和 ch29 32.html， 插 入 至 少 5 张 图 片 ， 然 后 利用 length 取得 图 片 数 量 ， 使 用 
循环 方式 列 出 URL。 

4. 请 参考 ch29 44.html， 改 成 鼠标 指向 对 象 时 换 另 外 一 张 图 片 ， 至 于 其 他 内 容 设计 可 自行 发 挥 创意 。 

5. 请 参考 ch29_ 41.html， 首 先 设置 5 种 颜色 可 供 选取 ， 选 择 颜 色 后 ， 再 单 击 标题 ， 将 标题 改 成 所 选 
的 颜色 。 
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HTML Canvas 绘图 与 动画 


本 章 摘 要 

30-1 建立 Canvas 绘图 环境 
30-2 绘制 矩形 

30-3 绘制 线条 

30-4 ”绘制 圆 形 或 弧 线 
30-5 色彩 渐变 效果 的 处 理 
30-6 绘制 文字 

30-7 绘制 图 像 

30-8 ”建立 简单 动画 

30-9 位移 与 旋转 


在 HTML4.01 时 代 ， 用 户 无 法 在 网 页 上 绘制 图 形 。Canvas 是 HTML5 新 增 的 元 素 ， 有 了 
这 个 元 素 ， 就 可 以 很 轻易 地 配合 JavaScript 的 一 些 方法 ， 在 网 页 内 绘制 直线 、 矩 形 、 圆 形 、 字 
符 和 图 像 ， 甚 至 绘制 简单 的 动画 。 


HTML5+CSS3 王者 归来 


sil 间 建立 Canvas 绘图 环境 


<canvas> 其 实 是 HTML 的 元 素 ， 用 于 建立 绘图 环境 ， 读 者 可 以 设想 成 绘图 区 ， 套 用 HTML 的 
概念 也 可 称 绘图 容器 ， 它 的 基本 使 用 语法 格式 如 下 : 

<canvas id="canvasId" width="xx" height="xx"> 文字 区 </canvas> 

id 是 绘图 区 的 标识 符 ，width 和 height 分 别 是 绘图 区 的 宽度 和 高 度 。 上 述 标 记 中 的 文字 区 (可 
以 省 略 ) 一 般 是 用 在 当 浏 览 器 不 支持 <canvas> 时 ， 输 出 “浏览 器 不 支持 canvas” 的 信息 。 当 用 
<canvas> 声明 绘图 区 后 ， 我 们 可 以 使 用 CSS 为 绘图 区 建立 样式 。 
程序 实例 ch30_1.html : 建立 canvas 绘图 区 ， 第 一 个 绘图 区 建立 完成 后 ， 为 这 个 绘图 区 加 上 外 框 ， 
第 二 个 建立 完成 后 ， 为 这 个 绘图 区 加 上 黄色 背景 色 。 
了 


3 <head> 
4 <meta charset="utf-8"> 


5 <title>ch39_ 1,html¢/title> pe 
6 ie HTML S Canvas 绘 
7 #demol { border:2px solid blue; } 

8 #deno2 { background-color:yellow; } 

9 </style> 

19 </head> 

11 <bodyy 

12 hl>HTML 5 Canvas 绘 图 </h1> 


1 <canvas 1d="demol”width="269”height="2e@"> 浏 览 器 不 文 持 canvas 元 素 </canvas> 
14 xcanvas id="demo2”width="168”height="166"> 浏 览 器 不 支持 canvas 元 素 </canvasy> 
15 </body> 

16 </html> 


<canvas> 元 素 本 身 没有 绘图 功能 ， 我 们 必须 使 用 JavaScript 调用 Canvas API (Application 
Programming Interface)， 或 称 Canvas 对 象 的 方法 (method) 来 进行 绘图 。 


ey 用 绘 制 算 形 


绘制 矩形 的 方法 有 许多 ， 下 面 将 一 一 说 明 。 
30-2-1 rect()、stroke() 和 strokeRect() 


rect() 可 用 于 绘制 矩形 ， 它 的 使 用 格式 如 下 : 

rect (x, y, width, height); 

x 是 相对 于 绘图 区 左上 角 的 x 轴 距 离 ，y 是 相对 于 绘图 区 左上 角 的 y 轴 距 离 ，width 是 矩形 的 宽 
度 ，height 是 矩形 的 高 度 。 

stroke() 实际 上 是 让 rect0 方法 产生 的 矩形 绘制 框 线 ， 默 认 颜 色 是 黑色 。 如 果 没 有 使 用 strokeO 
方法 ， 则 无 法 看 到 矩形 的 框 线 。 
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程序 实例 ch30_2.html : 绘制 矩形 的 实例 。 pe 
1 <ldoctype html> 执行 结果 
2 <html> 


3 <head> 

4 <meta charset="utf-s"> 
5 <titleych39 2.html</title> 

6 <style> 

7 smyCanvas { border;2px solid blue; } 

8 </style> 

9 </head> 

19 <body> 

11 <canvas id-"mycanvas”width="299”height="260"> 浏 览 芭 不 支持 canvas 元 素 c/canvas> 
12 xscripty 

13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 

14 Var ctx = obj.getcontext("2d"); // 建立 2 给 图 对 象 

15 ctx.rect(10, 19,109,89); 

16 ctx, stroke( ); 7/ 加 上 上 色彩 

17 c/script> 

18 </body> 

19 /html> 


上 例 中 我 们 已 经 成 功 绘制 出 矩形 了 ， 在 此 笔者 想 讲解 绘制 图 形 的 步骤 ， 当 我 们 建立 绘图 环境 
后 ， 在 实际 绘图 前 需 执 行 下 列 两 条 语句 。 


13 var obj = document.getElementById("myCanvas"); // 获得 canvas 对 象 
14 var ctx = obj.getContext("2d"); // 建立 2D 绘 图 对 象 


上 述 语句 主要 是 建立 2D 绘图 对 象 。 目 前 HTML5 只 支持 2D 绘图 ， 有 了 上 述 对 象 就 可 以 正式 绘 
图 了 。 上 述 程 序 的 第 15 行 是 绘制 矩形 ， 第 16 行 是 加 上 绘制 的 色彩 ， 如 果 没 有 后 者 将 看 不 到 所 绘制 
矩形 的 框 。 

坦白 说 使 用 两 条 语句 绘制 矩形 是 有 一 点 麻烦 ， 其 实 我 们 可 以 使 用 strokeRect0 方法 一 次 实现 绘制 
和 矩形 和 上 色 功 能 。strokeRect(0) 方法 使 用 格式 与 rect() 方法 相同 。 
程序 实例 ch30_3.html : 使 用 strokeRect(0) 方法 重新 设计 ch30_2.html， 下 面 是 与 ch30_2.html 不 同 的 
程序 代码 。 


15 ctx, strokeRect(10,10,100,80); 


pei 和 上 对 与 ch30 2.html 相同 。 


30-2-2 fillRect() 和 fillStyle() 


strokeRect() 方法 绘制 空 矩形 ，fillRect0) 方法 绘制 填充 的 矩形 ， 它 的 使 用 格式 与 strokeRectO 相 
同 。fillStyle0 的 使 用 格式 如 下 : 
fillstyle (value); 


value 可 能 的 值 如 下 : 
口 “color : 颜色 值 ， 可 参考 附录 E， 默 认 是 黑色 。 
口 _gradient : 可 使 用 线性 渐变 或 辐射 渐变 颜色 ，30-5 节 会 解说 。 
口 _pattern : 使 用 图 样 对象 。 
程序 实例 ch30_4.html : 绘制 填 满 矩形 的 应 用 。 本 程序 使 用 了 不 同 颜色 值 的 应 用 方法 ， 可 参考 第 17 
和 第 19 行 。 
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1 cldoctype htmy 二 4 士 

2 <html> 执行 结果 

3 <head> 

4 cmeta charset="utf-8"> 


5 <title>ch39 4.html</title> 

6 «<style> 

z smyCanvas { border:2px solid blue; } 

8 «</style> 

9 </head> 

18 xbody> 

11 xcanvas id="mycanvas”width="299”height="298"? 浏 览 壬 不 文 持 canvas 元 素 c/canvasy 
12 <script> 

13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 
14 Var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 
15 ctx.fillStyle = “yellow"; 

16 ctx. fillRect(10,10, 109,89); 

1 ctx.fillstyle = " 

18 ctx.fillRect (30,39,190, 80); 

19 ctx-fillstyle = "#7FFFag"3 

29 ctx.fillRect(50, 50,190,80); 

21 ctx.fillstyle = "FF6984"; 

2 ctx.fillRect(79,70,190,88); 

23 ctx.fillstyle = "blue"; 

24 ctXvfillRect(99,99,199,89)3 

25 </script> 

26 </body> 

27 </html> 


30-2-3 clearRect() 


这 个 方法 用 来 清除 区 块 区 间 ， 它 的 使 用 格式 与 rect() 方法 相同 ， 只 不 过 这 个 方法 会 清除 指定 
区 块 。 
程序 实例 ch30_5.html : 重新 设计 ch30_4.html， 这 个 程序 只 增加 了 第 25 行 ， 清 除 位 置 是 (60.60) 
宽 和 高 是 (80,60)。 


25 ctx.cleargect(69,69,89,60); // 清除 区 块 执行 结果 


0 二 绘制 线条 


在 Canvas 环境 中 绘制 线条 基本 上 与 绘制 矩形 一 样 ， 是 将 绘图 区 左上 角 视 为 坐标 原点 (0.0)， 往 
右 可 增加 x 轴 值 ， 往 下 可 增加 y 轴 值 。 


30-3-1 绘制 直线 


可 以 使 用 下 列 方法 绘制 直线 : 


moveTo (x, y); // 定义 线条 起 点 
lineTo (x, y); // 定义 线条 终点 ， 如 果 继 续 使 用 则 原先 终点 变 为 新 线条 的 起 点 


绘制 完成 后 与 rect0 方法 一 样 需要 使 用 stroke0 方法 上 色 。 
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程序 实例 ch30_6.html : 绘制 线条 的 应 用 。 


1 <ldoctype html> 21 </script> 
2 nl> 22 </body> 
a 23 </html> 

4 <meta charset="utf-8"> 

5 <title>ch30 6.html</title> 

6 <style> 

7 #myCanvas { border:2px solid blue; } 

a </style> 

9 </head> 

16 <body> 

11 <canvas id="myCanvas”width="290”height="29@"> 浏 览 器 不支 持 canvas 元 素 c/canvas> 
12 <script> 


13 var obj = document getElementById("myCanvas"); // 获得 canvas 对 象 
14 var ctx = obj.Betcontext("2d"); /7/ 建立 2D 给 图 对 象 
15 ctx.moveTo(9,0); /1 莽 制 第 一 条 二 

16 ctx. lineTo(59,50); 

17 ctx.moveTo(189,50); // 给 制 第 二 条 此 是 ! 型 
18 ctx. lineTo(1898,150); 

19 ctx.lineTo(159,159); 

29 ctx.stroke( ); /1 上 色 


30-3-2 beginPath() 和 closePath() 


beginPath0) 方法 的 功能 是 开始 一 个 新 的 路 径 ， 同 时 会 清除 之 前 记忆 的 线条 信息 ， 但 是 已 绘 好 的 
图 案 不 受 影响 。 这 个 方法 没有 参数 ， 网 页 程序 设计 师 习 惯 上 会 在 绘制 线条 前 先 加 上 这 个 方法 。 
closePath() 方法 用 于 关闭 路 径 ， 它 可 以 将 目前 绘图 点 与 绘图 起 点 连接 ， 如 此 ， 可 以 围 成 图 案 。 
这 个 方法 没有 参数 。 
程序 实例 ch30_7.html : 将 ch30_ 6.html 所 绘制 的 工 形 ， 封 闭 成 为 三 角形 。 


1 <ldoctype html> 29 ctx,stroke( ); 
2 <html> 21 </script> 
3 <head> 22 </body> 


a <meta charset="utf-8"> 23 </html> 
5 <titlexchae 7.htnl</title> 

6 <style> 

7 #myCanvas { border:2px solid blue; } 
8 


</style> 
9 </head> = 
19 <body> 

11 <canvas id-"myCanvas”width=-"269”height-"206"》> 浏 览 器 不 支持 canvas 元 素 </canvas> 

12 <script> 

13 Var obj = document.getElementById("mycanvas")3 // 获得 canvas 对 象 

14 var ctx = obj,getContext("2d"); // 建立 2D 痊 图 对 象 

15 ctx.beginpath( )3 

16 ctx. moveTo(199, 50); /1 先 绘制 条 线 是 L 形 

17 ctx.lineTo(166,156)3 

18 ctx, lineTo(159,156)3 

19 ctx,closepath( )3 /1 关闭 线条 成 三 角形 


30-3-3 lineWidth 


使 用 Canvas 时 默认 的 线条 宽度 是 1px， 但 是 可 以 使 用 lineWidth 设 定 线条 宽度 ， 单 位 是 px。 
程序 实例 ch30_8.html : 以 循环 方式 绘制 5 条 宽度 从 1px 到 5px 的 水 平 线 。 


1 <ldoctype htmly 
2 <html> 
3 chead> 


4 tmeta charset="utf-8"> 

5 <title>chae 8,html</title> 

6 <style> 

人 AmyCanvas { border:2px solid blue; } 

8 </style> 

9 </head> 

19 <body> 

11 <canvas id="myCanvas”width="299”height="260"> 浏 览 到 不 支持 canvas 元 素 </canvas> 
12 <script> 

3 Var obj = document .getElementById( “myCanvas”"); // 获得 canvas 对 象 
14 Var ctx = obj.getContext("2d"); // 杆 立 20 等 图 对 登 
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15 for ( var 1 = 1; 1 c=5; It+ ) { pe 

15 人 ; 执行 结果 一 一 一 一 
17 ctx.linewidth = i; // 设 定 闭 条 宽度 > 
18 ctx.moveTo(39,1"30); 

19 ctx. lineTo(170, 1*30); 

26 ctx.stroke( ); Ww EE 

21 } 

22 c/script> 

23 </body> 

24 </htmly 


30-3-4 fill() 


方法 fill0 可 将 目前 所 绘制 的 路 径 填 满 ， 如 果 所 绘制 的 图 案 尚未 闭合 ， 它 会 主动 从 起 点 绘 一 条 线 


到 终点 以 封闭 图 形 。 
程序 实例 ch30_9.html : 重新 设计 ch30_7.html， 以 第 19 行 取代 原先 程序 的 第 19 和 第 20 行 。 


19 ctx.fill( ); WA 封 半 图形 辐 叶 上 色 执行 结果 


30-3-5 lineCap 
这 个 属性 可 以 设 定 线条 的 端点 样式 ， 它 的 使 用 格式 如 下 : 


lineCap = "value"; 


value 值 的 可 能 内 容 如 下 : 


butt : 默认 值 ， 即 线 的 端点 是 平 的 。 
round : 线 的 端点 是 圆 的 ， 这 个 选项 会 让 线条 稍微 长 一 些 。 
square : 线 的 端点 是 矩形 的 ， 这 个 选项 会 让 线条 稍微 长 一 些 。 


程序 实例 ch30_10.html : 分 别 测试 属性 值 butt、round、square， 了 解 端点 样式 。 


回回 自 


1 <ldoctype html> 26 ctx.stroke( ); 

2 <html> 27 ctx.beginpath( ); 7/ 测试 线条 3 
3 <head> 28 ctx. lineWidth=10; 

4 <meta charset="utf-8"> 29 ctx. linecap="square"; WA square 
3 <title>ch3e_19.html</title> 30 Ctx.moveTo(158,50); 

6 «<style> 31 ctx. lineTo(159,150); 

#myCanvas { borderi2px solid blue; } 32 ctx.stroke( ); 

8 «</style> 33 </script> 

9 </head> 34 </body> 

19 <body> 35 </html> 


11 <canvas id="myCanvas” width="299”height="269"> 浏 览 器 不 支持 canvas 元 素 c/canvasy 


12 <scripty 
13 var obj = document .getElementById(“myCanvas"); // 其 得 canvas 对 象 ms 
14 var ctx = obj.getcontext("2d"); // 建立 20 迁 医 对 象 执行 结果 


15 ctx.beginpath( ); // 测 工 线条 1 
16 ctx. linewidth=10; 

17 ctx.lineCap="butt"; 1 butt 

18 ctx.moveTo(59, 58) 

19 ctx.1ineTo(59, 150); 

20 ctx.stroke( ); 

21 ctx.beginpath( ); // 测试 线条 2 
22 ctx. linewidth=10; 

23 ctx. linecap="round"; /1 round 
24 ctx.moveTo(199, 56); 


ctx.lineTo(199,156)3 
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30-3-6 lineJoin 
这 个 属性 可 以 设 定 线条 的 交接 点 样式 ， 它 的 使 用 格式 如 下 : 


lineJoin = "value"; 


value 值 的 可 能 内 容 如 下 : 


口 ”miter : 默认 值 ， 即 尖 的 角 。 

口 ”round : 线 的 交接 点 是 圆 的 。 

口 square : 线 的 交接 点 是 斜 的 。 

程序 实例 ch30_11.html : 分 别 测试 属性 值 miter、round、bevel， 了 解 交 接点 样式 。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch3e 11.htnml</title> 
<style> 
simyCanvas { border:2px solid blue; } 
</style> 
9 ¢/head> 
318 <body> 
11 《canvas id="myCanvas” width="369”height="266"> 浏 览 器 不 支持 canvas 元 素 </canvasy> 
12 <script> 


vamwmpuwn 


13 var obj = docunent.getElementById("myCanvas"); // 获得 canvas 对 象 
14 var ctx = obj.getContext("2d"); // 建立 2D 疆 图 对 象 
15 ctx.beginPath( ); 7/ 测试 交接 点 1 
16 ctx. lineWidth=19; 

17 ctx. lineJoi ter"s /1 miter 

18 ctx.moveTo(29,20); 

19 ctx. lineTo(59,160); 

29 ctx. lineTo(89,20); 

21 ctx. stroke( ); 


22 ctx.begi 3; 7/ 测试 交接 点 2 
23 GS i ; 

24 < // round 

25 G 

26 ctx. lineTo(148,160); 

27 ctx. lineTo(170,20); 

28 

29 /1/ 测试 区 接点 3 
38 

31 neJoin="bevel"; 1/ bevel 

32 ctx.moveTo(290,29); 

33 ctx. lineTo(230,160); 

34 ctx. lineTo(260,29); 

35 ctx.stroke( ); 

36 </script> 

37 </body> 

38 </html> 


ej 和 绘制 圆 形 或 缴 线 


are() 方法 可 以 绘制 圆 形 或 弧 线 ， 本 节 将 会 详细 解说 。 
30-4-1 绘制 圆 形 
绘制 圆 形 可 以 使 用 are0) 方法 ， 它 的 使 用 格式 如 下 : 


arc (x,yr,startangle,endangle); 


(x,y) 是 圆心 坐标 ，r 是 半径 ，startangle 是 起 始 角 度 ， 一 般 设 为 0，endangle 是 结束 角度 ， 可 设 为 
2*Math.PI。 
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程序 实例 ch30_12.html : 绘制 圆 形 的 基本 应 用 。 


17 ctx.stroke( ); 
<ldoctype html> a 
<html> ds 
esd 20 </html> 
<meta charset="utf-8"> 
<title>ch38 12.htm]l</title> 


<style> 执 


#myCanvas { border:2px solid blue; } 


士 
=] 


1 
于 

3 

4 

5 

6 

8 </style> 
9 </head> 
1 

1 

2 
33 


body> 
<canvas id="myCanvas"” width="369”height="269"> 浏 览 器 不 支持 canvas 元 票 </canvas> 
<script> 

var obj = document.getElementById("myCanvas"); // 获得 canvas 对 象 

14 var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 

15 ctx.beginpath( ); 

16 ctx.arc(150,199,60,0,2*Math.PI); // 绘制 圆 形 


30-4-2 绘制 弧 线 


同样 是 使 用 arc0 方法 ， 可 以 产生 曲 形 ， 方 法 是 结束 角度 不 要 设 为 “2*Math.PI”。 绘 制 圆 形 的 原理 如 
下 图 所 示 。 


1.5*Math.pl 


1*Math.PI 


0.5*Math.pl 


绘制 圆 形 时 ， 起 始 角 度 是 圆 的 右边 端点 ， 如 果 结 束 角度 是 1*Math.PI， 则 只 是 绘制 半圆 形 。 
程序 实例 ch30_13.html : 绘制 3 条 弧 线 ， 结 束 角 度 分 别 是 0.5/1.0/1.5*Math.PI。 


<ldoctype html> 执 
人 


1 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch30_ 13.html</title> 
6 

沁 

8 


士 


<style> 
#myCanvas { border:2px solid blue; } 
</style> 
9 </head> 
六 多 区 人 


11 <canvas id="myCanvas” width="389”height="266") 浏 览 器 不 支持 canvas 元 素 C/canvasy> 


12 <script> 

13 var obj = document.getElementById("myCanvas"); // 获得 canvas 对 象 
14 var ctx = obj.getContext("2d"); // 建立 2D 绘 图 对 象 
15 ctx-beginPath( ); 

16 ctx.arc(50,109,40,8,0.5*Math.PI); // 绘制 曲线 1 

好 ctx. stroke( ); 

13 ctx-beginPath( ); 

19 ctx.arc(159,100,49,0,1*Math.PI); // 绘制 曲线 2 

20 ctx. stroke( ); 

21 ctx.beginpath( ); 

22 ctx.arc(250,109,40,9,1.5*Math.PI); // 绘制 曲线 3 

23 ctx-stroke( ); 

24 </script> 

25 </bodyy 


26 </html> 


第 30 章 HTML Canvas 绘图 与 动画 


30--4-3 顺 时针 弧 线 或 逆 时 针 弧 线 


前 一 节 所 绘制 的 弧 线 是 沿 顺 时 针 方 向 ， 我 们 可 以 在 arc0 参数 中 增加 一 个 参数 ， 以 达到 绘制 逆 时 
针 弧 线 的 效果 。 


arc (x,y,r,startangle,endangle, counterclockwise); 
参数 counterclockwise 的 默认 值 是 false， 如 果 改 成 tue， 则 依 逆 时 针 方 向 绘制 弧 线 。 
程序 实例 ch30_14.html : 重新 设计 ch30_13.html， 在 arc0 方法 中 增加 true 参数 。 


<ldoctype htm> ps 
<html> 执行 结果 


EE 
2 
3 <head> 

4 <meta charset="utf-8"> 

多 <title>ch3e 14.html</title> 
6 

机 

8 


| 
<style> 
#myCanvas { border:2px solid blue; } | (、 1 、\ 
| 


</style> 
9 </head> 
16 xbody> 
11 <canvas id="myCanvas”width="369”height="296"> 浏 览 器 不 支持 canvas 元 素 </canvas> 
12 <script> 


13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 
14 Var ctx = obj.getContext("2d"); 

15 ctx.beginpath( ); 

16 ctx.arc(50,109,40,0,9.5*Math.PpI,true); // 给 制 弧 线 1 
17 ctx,stroke( ); 

18 Ctx.beginpath( ); 

19 ctx.arc(158,190, 49,9,1*Math.PI, true); // 给 制 缴 线 2 
26 ctx. stroke( ); 

21 ctx.beginpath( ); 

22 ctx.arc(250,198,49,8,1.5*Math.PI, true); // 给 制 弧 线 3 
23 ctx,stroke( ); 

24 </script> 

25 </body> 

26 </html> 


绘制 弧 线 ， 角 度 起 点 不 需 一 定 在 0 度 ， 可 以 自选 角度 ， 参 考 下 列 实例 。 
程序 实例 ch30_15.html : 从 1.25*Math.PI 处 开始 绘制 弧 形 的 应 用 。 


1 《ldoctype html> 

2 <html> 

3 <head> | 
4 <meta charset="utf-8"> 
5 
6 
有 
8 


<title>ch38_15.html</title> 


<style> 
#myCanvas { border;2px solid blue; } 


</style> 
9 </head> | 
16 <body> 
11 <canvas id="myCanvas”width="366”height="269"> 浏 览 器 不 支持 canvas 元 素 </canvasy> 
12 <script> 


13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 登 

14 var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 

15 ctx,beginPath( ); 

16 ctx.arc(50,100,49,1.25*Math.pI,1.75*Math.pI); // 绽 制 弧 线 1 
17 ctx,stroke( ); 

18 ctx.beginpath( ); 

19 ctx.arc(158,106,49,1.25*Math.PI,1.75*Math.PI,true);  ”// 绘制 弧 线 2 
26 ctx. stroke( ); 

21 </script> 

22 </body> 


23 </html> 
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在 设计 圆 弧 时 ， 若 是 绘制 完 圆 弧 后 加 上 closePath0 方法 ， 圆 弧 的 端点 会 接合 。 
程序 实例 ch30_16.html : 重新 设计 ch30_15.html， 将 弧 线 接合 。 


1 <ldoctype html> 
2 <html> 

3 <head> 

a <meta charset="utf-8"> 
<title>ch38 16.html</title> 
6 

村 

8 


<style> a; 


myCanvas { border:2px solid blue; } 
c/style> 


9 </head> 

19 <body> 

11 <canvas id="myCanvas”width="399”height="269") 浏 览 器 不 支持 canvas 元 票 </canvas> 
12 <script> 


13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 和 象 

14 var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 

15 ctx.beginpath( ); 

16 ctx.arc(56,190,49,1.25*Math.PI,1.75*Math.PT); // 给 剂 孤 线 1 
17 ctx.closepath( ); 

18 ctx. stroke( ); 

19 ctx,beginPath( ); 

20 ctx.arc(150,108,40,1.25*Math.PI,1.75*Math. PI, true); // 给 制 线 线 2 
21 ctx.closepath( ); 

22 ctx. stroke( ); 

23 </script> 

24 </body> 

25 </html> 


30-4-4 实心 圆 的 绘制 


其 实 只 要 适度 将 fllstyle0 和 fl10 方法 应 用 在 绘制 完 圆 形 后 ， 就 可 以 绘制 实心 
序 实例 ch30_17.html : 绘制 水 蓝 色 〈aqua) 的 实心 圆 。 


前 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset-"utf-8"> 

5 <title>ch3e_17.html</title> 

6 <style> 

7 myCanvas { border:2px solid blues } 
8 «</style> 

9 </head> 

16 ¢body> 

11 <canvas id="myCanvas”width="366”height="266"> 浏 览 器 不 支持 canvas 元 素 </canvas> 
12 «script> 


13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 
14 var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 
15 ctx.beginpath( ); 

16 ctx.arc(150,108,60,0,2*Math.PI); /1 痊 制 加 形 

17 ctx.fillstyle = "aqua"; // 选 aqua 色 彩 

18 ctx,fill( ); 7/ 填充 色彩 

19 ctx.stroke( ); // 竣 较 形 外 框 

20 </script> 

21 《/body> 

22 </html> 


30-4-5 arcTo() 
arcTo() 方法 的 功能 是 连接 两 条 交 线 的 弧 线 ， 使 用 语法 格式 如 下 : 


arcTo (xl,yl,x2,y2,7); 
(x1,y1) 是 第 一 条 交 线 的 坐标 ， 可 以 想 成 是 控 点 的 坐标 ，(x2.y2) 是 第 二 条 交 线 的 坐标 ， 可 以 想 成 
是 弧 线 终点 的 坐标 ,+ 是 半径 ， 下 列 是 参数 的 示意 图 。 
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Start point 
® (xly1) 


(x2,y2) 


程序 实例 ch30_18.html : arcTo0) 方法 的 实例 应 用 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
入 <title>ch3e_18.html</title> 

6 <style> 

7 amycanvas { border:2px solid blue; } 
8 </style> 

9 </head> 

10 <body> 

11 <canvas id="myCanvas”width="290”height="286"> 浏 览 哮 不 支持 canvas 元 素 </canvas> 93 

12 <scripty 执行 结果 
13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 

14 var ctx = obj.getcontext("2d"); // 建立 20 冶 图 对 象 

15 ctx.beginpath( ); 


16 ctx.moveTo(38, 30); // 总 条 起 点 
17 ctx.lineTo(168,3B); // 建立 水 平 线 
18 ctx.arcTo(150, 30,150,80,50); // 建立 弧 线 
19 ctx. lineTo(159,158); // 于 立地 直线 


29 ctx.stroke( ); /1 给 外 杠 
21 </script> 

22 </body> 

23 </html> 


本 本 色彩 渐变 效果 的 处 理 


在 Canvas 绘图 中 ， 我 们 也 可 以 实现 色彩 渐变 效果 ， 本 书 将 渐变 分 成 线性 〈linear) 渐变 和 辐射 
(radial) 渐变 并 分 别 解说 ， 另 外 也 将 讲解 渐变 应 用 在 线条 对 象 的 方法 。 


30-5-1 线性 渐变 
若 想 实现 渐变 色彩 ， 首 先 要 建立 渐变 对 象 ， 下 面 是 建立 线性 渐变 对 象 的 方法 。 


createLinearGradient (xl,yl,x2,y2); 

(x1.y1) 是 线性 渐变 的 起 点 ，(x2.y2) 是 线性 渐变 的 终点 。 如 果 起 点 和 终点 的 y 轴 坐 标 值 相同 ， 表 
示 这 是 从 左 到 右 或 从 右 到 左 的 线性 渐变 ; 如 果 x 轴 坐 标 值 相同 ， 表 示 这 是 从 上 到 下 或 是 下 到 上 的 线 
性 渐变 ; 如 果 坐 标 轴 不 相同 ， 表 示 是 从 某 一 点 渐变 到 另外 一 点 ， 例 如 ， 如 果 (x1,y1) 代表 左上 和 角 坐 
标 ，(x2,y2) 代表 右 下 角 坐 标 ， 将 得 到 左上 角 到 右 下 角 的 渐变 。 

建立 好 线性 渐变 的 起 点 和 终点 后 ， 下 一 步 是 设 定 在 这 区 间 内 的 色彩 ， 下 列 是 设 定 色彩 的 方法 。 


addColorStop (value, "color") 7 
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value 值 是 色彩 停 驻 点 位 置 ， 它 的 值 为 0-1，0 代表 线性 渐变 的 起 点 ，1 代表 线性 渐变 的 终点 。 
如 果 有 更 多 色彩 ， 只 要 设 定 该 色 的 位 置 即 可 。color 是 颜色 值 。 
程序 实例 ch30_19.html : 4 种 渐变 的 实例 ， 每 一 渐变 皆 是 两 种 色彩 ， 前 两 种 渐变 是 左右 渐变 ， 后 两 


种 渐变 是 上 下 渐变 。 
1 xldoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <title>ch38_19.html</title> 
6 <style> 
天 #myCanvas { border:2px solid blue; } 
8 </style> 
9 </head> 
19 <body> 
11 <canvas id="myCanvas” width="899"” height="269" > 浏览 器 不 支持 canvas 元 素 </canvasy 
12 <script> 
13 var obj = document.getElementById("myCanvas"); // 获得 canvas 对 象 
14 var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 
15 // 第 一 个 矩形 
16 var grd = ctx.createLinearGradient(29,29,186,26); // 建立 左 往 右 。 gradient 
17 grd.addColorStop(9, "blue"); 
18 grd.addColorStop(1, "white"); 
19 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 
20 ctx.fillRect(20,29,160,160); // 执行 填充 
21 // 第 二 个 矩形 
22 grd = ctx.createLinearGradient(229,29,386,29); // 建立 左 往 右 渐变 gradient 
23 grd.addColorStop(9, "green"); 
24 grd.addColorStop(1,"yellow"); 
25 ctx.fillStyle=grd; // 设 定 填充 样式 为 grd 
26 ctx.fillRect(229,29,166,166); // 执行 填充 
27 // 第 三 个 矩形 
28 Brd = ctx.createLinearGradient(429,29,426,189); ”// 建立 上 往 下 淹 变 gradient 
29 grd.addColorStop(e@,"yellow"); 
39 grd.addColorStop(1,"red"); 
31 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 
32 ctx.fillRect(429,29,166,166)5 // 执行 填充 
33 // 第 四 个 矩形 
34 grd = ctx.createLinearGradient(626,26,626,189); ”// 建立 上 往 下 渐变 gradient 
35 grd.addColorStop(@, "red"); 
36 grd.addColorStop(1, "white"); 
37 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 
38 ctx.fillRect(620,20,160,160); // 执行 填充 
39 </script> 
49 </body> 
41 </html> 


程序 实例 ch30_20.html : 4 种 渐变 的 实例 ， 每 一 渐变 皆 是 3 种 色彩 ， 前 两 种 渐变 是 左右 渐变 ， 第 3 


种 渐变 是 从 左上 到 右 下 渐变 ， 第 4 种 渐变 是 从 左下 到 右上 渐变 。 
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1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

此 <title>ch36_26.html</title> 

6 <style> 

7 #myCanvas { border:2px solid blue; } 

8 </style> 

9 </head> 

18 <body> 

11 <canvas id="myCanvas” width="8689”height="266" > 浏览 器 不 支持 canvas 元 素 </canvas> 
12 <script> 


13 var obj = document.getElementById("myCanvas");  // 获得 canvas 对 象 

14 Var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 

15 // 第 一 个 矩形 

16 var grd = ctx.createLinearGradient(29,29,188,26); // 建立 左 往 右 渐变 gradient 
17 grd.addColorSstop(9, “blue"); 

18 Brd.addColorStop(8.5,"green"); 

19 grd.addColorstop(1, "white"); 

28 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 

21 ctx.fillRect(28,28,169,168); // 执行 填充 

22 // 第 二 个 矩形 

23 Brd = ctx.createLinearGradient(226,29,386,296); // 建立 左 往 右 渐变 gradient 
24 grd.addColorStop(8, “green”); 

25 grd.addColorStop(8.5, "red”); 

26 grd.addColorstop(1, “yellow"); 

27 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 

28 ctx.fil1Rect(226,26,166,166); // 执行 填充 

29 // 第 三 个 矩形 

38 grd = ctx.createLinearGradient(428,26,589,188);  // 建立 左上 往 右 下 渐变 gradient 
31 grd.addColorstop(8, "yellow"); 

32 grd.addColorstop(8.5, "green"); 

33 grd.addColorStop(1, "yellow"); 

34 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 

35 ctx.fillRect(426,26,166,166); // 执行 填充 

36 // 第 四 个 和 矩形 

37 Brd = ctx.createLinearGradient(629,189,789,28); ”// 建立 左上 往 右 下 渐变 gradient 
38 Brd.addColorStop(e, "red"); 

39 grd.addColorstop(98.5, "yellow”); 

48 grd.addColorStop(1, “white"); 

41 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 

42 ctx.fillRect(628,20,160,168); // 执行 填充 

43 </script> 

44 </body> 

45 </html> 
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30-5-2 辐射 渐变 
下 列 是 建立 辐射 渐变 对 象 的 方法 。 


createRadialGradient (xl,yl,rl1,x2,y2,r2); 
(xl,y1) 是 辐射 渐变 的 起 点 ，rl 是 起 点 的 半径 ，(x2.y2) 是 辐射 渐变 的 终点 ，I2 是 终点 的 半径 。 建 
立 好 辐射 渐变 的 起 点 和 终点 后 ， 下 一 步 是 设 定 区 间 内 的 色彩 ， 与 线性 渐变 一 样 也 使 用 addColorStop0 
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方法 。 至 于 色彩 停 驻 点 位 置 ， 它 的 值 是 0~1，0 代表 辐射 渐变 的 中 心 ，1 代表 辐射 渐变 的 外 围 点 。 如 
果 有 更 多 色彩 ， 只 要 设 定 该 色 的 位 置 即 可 。 

程序 实例 ch30_21.html : 辐射 渐变 的 应 用 ， 前 面 两 种 是 正方 形 填充 两 种 色彩 的 渐变 ， 第 3 种 是 矩 
形 填充 3 种 色彩 的 渐变 。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch30 21.html</title> 
<style> 
#myCanvas { border:2px solid blue; } 
</style> 
9 </head> 
10 <body> 
11 “canvas id="myCanvas”width="769”height="200"> 浏 览 器 不 支持 canvas 元 素 (/canvas> 
12 <script> 


CR 


13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 

14 var ctx = obj.getContext("2d"); // 建立 2D 综 图 对 象 

15 // 第 一 个 逢 形 

16 var grd -= ctx,createRadialGradient(196,199,19,199,166,196); // 建立 辐射 渐变 gradient 
vs grd.addcolorstop(®, “blue™ ); 

18 grd.addCcolorstop(1,"white"); 

19 ctx.fillstyle=grd; // 设 定 填充 样式 为 grd 
26 ctx,fil1Rect(29,26,166,166)3 // 执行 填充 

21 // 第 二 个 逢 形 

22 grd = ctx.createRadialGradient(256, 160,19,328, 109, 100); // 建立 辐射 渐变 gradient 
23 grd.addcolorstop(9,"green"); 

24 grd.addcolorstop(1,"yellow"); 

25 ctx,fillstyle=grd; // 设 定 填 无 样式 为 grd 
26 ctx.fillRect(220,20,160,168); // 执行 填充 

27 // 第 三 个 矩形 

28 grd = ctx.createRadialGradient(569,196,1,586,168,186); // 建立 辐射 渐变 gradient 
29 grd.addcolorstop(@, "red"); 

30 grd.addcolorstop(9.5,"yellow"); 

31 grd.addcolorstop(1,"green"); 

32 ctx,fillStyle=grd; // 设 定 填充 样式 为 grd 

33 ctx,fillRect(420,29,260,169); // 执行 填充 

34 </script> 

35 </body> 

36 </html> 
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30-5-3 将 渐变 应 用 在 矩形 框 线 


在 讲解 这 个 知识 点 前 ， 笔 者 想 先 介绍 方法 strokeStyle0， 这 个 方法 一 般 用 于 设 定 线条 的 颜色 ， 当 
然 也 可 以 应 用 在 线条 或 矩形 框 线 。 它 的 使 用 格式 如 下 : 
strokestyle (value) 7 
value 可 能 的 值 如 下 : 
口 “color : 颜色 值 ， 可 参考 附录 E， 默 认 是 黑色 。 
口 gradient : 使 用 线性 或 辐射 渐变 颜色 ， 前 面 有 介绍 。 
口 _pattern : 使 用 图 样 对 象 。 
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程序 实例 ch30_22.html : 绘制 绿色 和 红色 的 矩形 框 线 。 
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<ldoctype html> 


<html> 
<head> 
<meta charset="utf-8"> 
<title>ch3e 22.html</title> 
<style> 
#myCanvas { border:2px solid blue; } 
</style> 
</head> 
<body> 
<canvas id="myCanvas”width="569”height="286"> 浏 览 器 不 支持 canvas 元 素 </canvas> 
<script> 
var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 
var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 
// 第 一 个 矩形 
ctx,lineWidth = 19; 
ctx. strokestyle = "green"; // 设 定 样式 为 绿色 
ctx. strokeRect(20,20,169,160); // 执行 绘制 
// 第 二 个 矩形 
ctx.lineWidth = 10; 
ctx.strokestyle = "red"; // 设 定 样式 为 红色 
ctx. strokeRect(229, 20,260,160); // 执行 绘制 
</script> 
</body> 
</html> 


程序 实例 ch30_23.html : 将 渐变 应 用 在 矩形 框 线 的 应 用 。 
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<ldoctype html> 执行 
<html> 
<head> 

<meta charset="utf-8"> 

<title>ch38_23.html</title> 


<style> 
#myCanvas { border:2px solid blue; } 
</style> 
</head> 
<body> 
<canvas id="myCanvas”width="569”height="288"> 浏 览 器 不 支持 canvas 元 素 </canvas> 
<script> 
var obj = document.getElementById("myCanvas"); // 获得 canvas 对 象 
var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 
// 第 一 个 矩形 
var grd = ctx.createLinearGradient(9,9,186,9)3; // 建立 线性 渐 层 gradient 


grd.addColorstop(9, "green"); 
grd.addColorstop(1,"yellow"); 
ctx.lineWidth = 19; 


ctx.strokestyle = grd; // 设 定 样式 为 grd 
ctx.strokeRect(29,26,166,166)3 // 执行 绘制 

// 第 二 个 矩形 
grd = ctx.createLinearGradient(269,9,486,6); // 建立 线性 渐 层 gradient 


grd.addColorstop(9, "yellow"); 
grd.addColorstop(9.5, "red"); 
grd.addColorstop(1, "yellow"); 
ctx.lineWidth = 19; 


ctx. strokestyle = grd; // 设 定 样式 为 grd 
ctx,.strokeRect(226,26,266,169); // 执行 绘制 
</script> 
</body> 


</html> 
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EE 绘制 文字 


本 节 将 介绍 绘制 文字 的 相关 属性 和 方法 。 


30-6-1 font 


| 


这 个 属性 可 以 设 定 字 体 和 字号 ， 下 列 是 常 使 用 的 语法 格式 : 


font = "font-style font-variant font-weight font-family font-size"; 


font-style : 可 以 是 normal( 默认 )、italic、oblique。 
font-variant : 可 以 是 normal( 默认 )、small-caps。 
font-weight : 可 以 是 normal( 默认 )、bold、bolder、lighter。 
font-family : 可 选择 系统 支持 的 字体 ， 例 如 Arial 等 。 
font-size : 可 以 直接 用 数字 。 


30-6-2 fillText() 和 strokeText 


1 
2 
3 


18 
19 


这 两 个 方法 可 以 写 出 文字 ， 它 的 使 用 格式 如 下 : 


fillText (text, x,y, maxWidth); // 输出 实体 文字 
strokeText (text,x,y,maxWidth); // 输出 轮廓 文字 


text 是 要 输出 的 文字 ，(x,y) 是 文字 输出 的 起 点 位 置 ，maxWidth 参数 可 以 省 略 ， 它 表示 文字 的 最 


大 宽度 。 
程序 实例 ch30_24.html : 输出 文字 的 应 用 。 
<ldoctype html> 执行 结果 
<html> 
《head> 
‘<meta charset-"utf-B"y > 
<title>ch39_24.html</title> Deep Learning 
<style> 
HmyCanvas { border:2px solid blue; } Deep Learninc 
</style> ; 
</head> 
<body> 
<canvas id="mycanvas”width="4o9”height="156"> 浏 览 器 不 广 持 canvas 元 素 </canvas> 
<script> 
var obj = document.BetElementById("myCanvas"); // 获得 canvas 对 象 
var ctx = obj.getContext("2d"); // 建立 20 绽 图 对 象 
ctx.font = "50px Arial"; 
ctx.fillText("Deep Learning",29,59)3 // 输出 实体 文字 
ctx.strokeText ("Deep Learning",29,120); // 第 出 轮 记 文字 
</script> 
</body> 
</html> 
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30-6-3 文字 输出 与 渐变 的 应 用 
程序 实例 ch30_25.html : 将 渐变 应 用 于 文字 输出 。 
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1 <ldoctype html> 行 

2 ht 执行 结果 
3 <head> 

a <meta charset="utf-8"> 
5 

6 

7 

8 


pt Deep Lea rning 


myCanvas { border:2px solid blue; } 


</style> D L 中 
Pe ep Learmning 
18 <body> 
11 <canvas id="myCanvas”width="499”height="159"> 浏 览 器 不 支持 canvas 元 素 </canvas> 
12 <script> 


13 var obj = document .getElementById("myCanvas"); // 获得 canvas 对 象 
14 var ctx = obj.getContext("2d"); // 建立 20 绘 图 对 象 
15 Brd = ctx, createLinearGradient (28,9,389,6); // 建立 左 往 石 渐变 eradient 
16 Bgrd.addcolorstop(e, "green"); 

17 grd.addcolorstop(1,"yellow"); 

18 ctx,fillstyle = grd; 

19 ctx.font = "5epx Arial"; 

20 ctx.fillText("Deep Learning",26,56); // 输出 实体 文字 
21 ctx.strokestyle- grd; 

22 ctx. strokeText("Deep Learning",29,129); // 芹 出 轮 麻 文字 
23 «</script> 

24 </body> 

25 </html> 


30-6-4 ”输出 文字 居中 对 齐 
textBaseline 属性 可 设 定 文字 垂直 位 置 ， 使 用 的 语法 格式 与 图 示 说 明 如 下 : 


textBaseline = top | middle | bottome | alphabetic | Hanging; 
Alphabatic Botiom Eng WiddleTop 一 
top 表示 文字 上 缘 对 齐 基线 ，middle 表示 文字 中 央 (em 区 块 ) 对 齐 基线 ，bottom 表示 文字 下 缘 
对 齐 基 线 。alphabetic 是 默认 值 ， 表 示 文 字 基线 在 正常 位 置 。 


程序 实例 ch30_26.html : 输出 文字 居中 对 齐 的 应 用 。 


1 <ldoctype htmly 执行 结 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

可 <titleych36_26.html</title> 

6 <style> 

7 #myCanvas { border:2px solid blue; } Deep Learning 
8 </style> 

9 </head> 

16 <body> 

11 <canvas id="myCanvas”width="496”height="129"> 浏 览 器 不 支持 canvas 元 系 c/canvas> 
12 <script> 


13 var obj = document.getElementById("mycanvas"); // 获得 canvas 对 针 

14 var ctx ~ obj.getContext("2d"); // 建立 2D 妾 图 对 象 

15 grd = ctx.createlLinearGradient(20,8,380,8); // 建立 左 往 右 渐变 gradient 
16 grd.addcolorstop(9, "green"); 

17 grd.addColorstop(1,"yellow"); 

18 ctx.fillstyle = grd; 

19 ctx,font = "sepx Arial"3 

20 ctx,textBaseline = “middle™; // 垂直 居中 

21 ctx,textAlign = “center” /1/ 署 出 在 水 平 居 中 

22 ctx,fillText("Deep Learning"”,obj.width/2,0bj.height/2); // 输出 实体 文字 
站 </script> 

24 </body> 

25 </html> 


Ed 


在 Canvas 环境 下 可 以 使 用 drawImage( ) 方法 绘图 ， 此 外 也 可 以 使 用 它 来 放大 或 缩小 图 像 ， 它 的 
使 用 格式 如 下 : 
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drawImage (img, x, y); // 方 法 1 
drawImage (img, x,yw,h); // 方 法 2 
drawImage (img, sx sy, Sw, sh, Xx, yw,h); // 方 法 3 
口 方法 1 (x,y) 是 图 像 坐标 起 点 ，img 是 图 像 ， 可 以 用 与 原 图 相同 的 大 小 绘图 。 
口 方法 2 (x,y) 是 图 像 坐标 起 点 ，img 是 图 像 ，w 是 图 像 宽度 ，h 是 图 像 高 度 。 
口 方法 3 (sx,sy) 是 被 复制 图 像 的 坐标 起 点 ，img 是 图 像 。sw 是 被 复制 图 像 的 宽度 ，sh 是 被 复 
制图 像 的 高 度 。(x,y) 是 复制 后 图 像 的 位 置 ，w 是 复制 后 图 像 的 宽度 ，h 是 复制 后 图 像 的 高 度 。 
了 解 上 述 参 数 后 ， 就 可 以 实际 建立 Canvas 绘图 了 。 首 先 需 要 建立 一 个 Image 对 象 ， 建 好 后 再 设 
定 图 像 对 象 的 路 径 (URL) : 


Var img = new Image( ) 7 
img.src = "图 像 的 URL"; 


程序 实例 ch30_27.html : 实际 建立 一 个 Canvas 的 图 像 ， 建 立时 直接 指定 图 像 的 宽度 和 高 度 。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ch38 27.html</title> 
<style> 
#myCanvas { border:2px solid blue; } 
</style> 
</head> 
<body> 
<canvas id="mycanvas”width="499”height="266"> 浏 览 器 不 文 持 canvas 元 素 c/canvas> 
<script> 
window.onload = function() { 
var obj = document.getElementById("myCanvas"); 
var ctx = obj.getContext("2d"); 
var img - new Inage( ); 
img.src = “northcountry.png"; 
ctx.drawImage(img, 10, 19, 386, 180); 
bs; 
</script> 
</body> 
</html> 


程序 实例 ch30_28.html : 这 个 程序 会 先 显示 图 片 ， 然 后 建立 一 个 Canvas 绘图 区 ， 最 后 将 所 裁 切 的 
图 片 放 在 Canvas 绘图 区 。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


<title>ch38 28.htnl</title> 萎 轴 图片 
<style> 
smyCanvas { border:2px solid blue; } 
</style> 
</head> 


<p>Canvas: 载 切 和 显示 图 片 </p> 
<canvas id="mycanvas”width="499”height=“296"> 浏 览 器 不 支持 canvas 元 素 <c/canvasy> 


<script> Canvas: 搁 切 和 显示 图 片 
window.onload = function() { 
var obj = document.getElementById("myCanvas"); 
Var ctx = obj.getContext ("2d"); 
var img = document.getElementayId("pict"); 
ctx,drawImage(img,259,126,168,166,16,19,169,106); ”// 裁 切 和 吕 示 图 片 _ 
} 
</script> 
</body> 


</html> 
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| 30-8 | 建立 简单 动画 


建立 动画 的 基本 步骤 如 下 : 

(1) 绘制 动画 图 片 。 

(2) 让 动画 显示 一 段 时 间 ， 可 使 用 setInterval( 方法 。 

(3) 删除 动画 图 片 ， 可 使 用 clearRect() 方法 或 是 用 白色 再 绘制 一 次 。 

(4) 将 绘图 点 移 到 新 位 置 ， 回 到 步骤 1。 
程序 实例 ch30_29.html : 设计 一 个 动画 ， 每 0.5 秒 执行 一 次 ， 左 右边 切换 亮 灯 ， 左 边 会 亮 蓝 灯 ， 右 
边 会 亮 红 灯 。 


<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<titleych38_29.htmlc/titley 
<style> 
#myCanvas { border:2px solid blue; } 
</style> 
9 </head> 
16 <body> 
11 <canvas id="myCanvas”width="269”height="299") 浏 览 器 不 支持 canvas 元 素 </canvas> 
12 <script> 
13 window.onload = function() { 


14 var obj = document.getElementById("myCanvas"); 

15 var ctx = obj.getContext("2d"); 

16 var light = true; // light=true 亮 左边 否则 亮 右边 
17 setInterval(onoff, 500); // 每 8.5 秒 执行 onoff 函 数 一 次 

18 function onoff( ) { 

19 if ( light == true ) { /1/ 如 果 1light 是 true 表 示 亮 左边 蓝 方块 
20 ctx.fillsStyle = "blue"; // 左边 方块 蓝 色 

21 ctx.fillRect(46，99，29，26); // 绘制 左边 方块 

22 ctx.fillStyle = "white" // 右边 方块 白色 

23 ctx.fillRect(149,90,20,20); // 用 白色 方块 绘制 右边 相当 于 清除 
24 light = false; 

25 } 

26 else { /1/ 如 果 1ight 是 false 表 示 亮 右边 红 方块 
27 ctx.fillstyle = "white"; // 左边 方块 白色 

28 ctx.fillRect(40, 99, 29, 20); // 用 白色 方块 绘制 左边 相当 于 清除 
29 ctx.fillStyle = "red" // 右边 方块 红色 

36 ctx.fillRect(149,90,29,29); // 绘制 右边 方块 

31 light = true; 

了 

33 } 

34 } 

35 ); 

36 </script> 

37 </body> 

38 </html> 


行 疆 
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程序 实例 ch30_30.html : 设计 一 个 动画 ， 动 画 中 的 方块 可 以 从 左上 角 移 至 右 下 角 ， 每 0.5 秒 移动 
一 次 。 
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1 <ldoctype html> 
2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch30 38.html</title> 
6 

. 

3 


xstyle> 
#myCanvas { border:2px solid blue; } 

</style> 
9 </head> 
19 <body> 
11 <canvas id="myCanvas”width="269”height="2896"> 浏 览 器 不 支持 canvas 元 素 </canvas> 
12 <script> 
13 window.onload = function() { 
14 var obj = document.getElementById("myCanvas"); 
15 var ctx = obj.getContext("2d"); 
16 var bottom = false; 
17 vari = 0; 
18 var len = 20; /7 位 移 单位 
19 var x = 29; // 矩形 宽 
29 var y = 29; 1/ 矩形 高 
21 setInterval(moving, 560); // 每 9.5 秒 执行 moving 函 数 一 次 
22 function moving( ) { 
23 if ( bottom == true ) { /1/ 如 果 bottom 是 true 表 示 到 底 了 
24 bottom = false; 
25 ctx. clearRect(180,189,x,y); 7/ 清除 最 右 下 角 方 块 
26 } 
27 else { 
28 ctx.clearRect(i-len,i-len,x,y); // 清除 方块 
29 } 
36 ctx.fillStyle = "blue”; // 方块 颜色 
31 ctx.fillRect(i, i, x, y); // 绘制 方块 
32 i 4= len; // 移动 绘图 位 置 
33 if (i== 299 )1{ 
34 bottom = true; 7/ 出 现在 右 下 角 
35 = 8; 
36 } 
37 } 
38 }; 
39 </script> 
48 </body> 
41 </html> 


位 移 与 旋转 


Canvas 绘图 区 建 好 后 ， 默 认 原点 位 于 左上 角 ， 使 用 translate0 方法 可 以 移动 原点 位 置 ， 它 的 使 


用 格式 如 下 : 


translate (x, y); 


x 是 和 轴 坐 标 移动 距离 ， 正 值 为 向 右 移动 ， 负 值 为 向 左 移动 。y 是 Y 轴 坐 标 移动 距离 ， 正 值 向 


下 移动 ， 负 值 向 上 移动 。 
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程序 实例 ch30_31.html : translate0 方法 的 应 用 ， 绘 制 时 针 长 条 。 这 个 程序 会 先 移动 原点 到 Canvas 
绘图 区 中 央 位 置 ， 然 后 再 输出 一 条 指针 。 


<ldoctype html> 了 疆 . 


工 
2 
3 <head> 

4 <meta charset="utf-8"> 

3 <*title>ch39 31.html</title> 
6 

7 

8 


<style> 
#myCanvas { border:2px solid blue; } 
/style> 
9 </head> 
19 <body> 
11 《canvas id-"myCanvas”width-"266”height-"260"> 浏 览 器 不 支持 canvas 元 素 /canvasy 
12 <script> 
13 window.onload = function() { 
14 var obj = document,getElementById("myCanvas"); 
15 var ctx = obj.getContext("2d"); 
16 var radius = obj.width/2; 
17 ctx.translate(radius, radius); 
18 ctx. linecap = "round"; 
19 ctx.fillstyle = "blue"; // 方 潜 颜色 
20 ctx.fillRect(0,9,50,radius * 8.05); // 绘制 时 针 长 条 
21 $B 
22 </script> 
23 </body> 
24 </html> 


rotate() 方法 的 功能 是 依 原点 位 置 旋转 图 形 ， 如 果 是 正 值 则 按 顺 时 针 方 向 旋转 ， 负 值 则 是 逆 时 针 
方向 旋转 ， 使 用 格式 如 下 : 


rotate(angle*Math.PI/180); 


上 述 公 式 中 angle 参数 代表 旋转 角度 。 
程序 实例 ch30_32.html : 重新 设计 ch30_31.html， 增 绘 一 条 旋转 30 度 的 时 针 长 条 。 


1 xldoctype html> 
2 <html> 

<head> 

4 <meta charset="utf-8"> 

5 <title>ch38 32.html</title> 
6 <style> 
7 
8 


uv 


smyCanvas { border:2px solid blue; } 


</style> 
9 </head> ~ 


16 <body> 

11 <canvas id="myCanvas”width="299”height="299"> 浏 览 器 不 支持 canvas 元 素 ¢</canvas> 
12 <script> 

1 window.onload = function() { 

14 Var obj = document .getElementById("myCanvas"); 

15 var ctx = obj.getContext("2d"); 

16 var radius = obj.width/2; 

17 ctx.translate(radius, radius); 

18 ctx.linecap = "round"; 

19 ctx.fillstyle = "blue"; // 方块 阁 色 

20 ctx.fillRect(0,90,59, radius * 8.65); 4/ 答 制 时 针 长 条 
21 ctx.rotate(30*Math.PI/180); // 正 时 针 旋 转 
22 ctx.fillRect(8,9,59, radius * 8.85); // 综 制 时 针 长 条 
3 BB 

24 </script> 

25 </body> 

26 </html> 


相信 各 位 读者 一 定 了 解 位 移 〈translate) 和 旋转 (rotate) 方法 的 功能 了 ， 接 下 来 笔者 要 介绍 在 
时 钟 位 置 输出 小 时 、 数 字 的 方法 ， 为 设计 时 钟 做 基础 。 
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程序 实例 ch30_33.html : 重新 设计 ch30_31.html， 增 加 输出 时 钟 数字 “1”。 


<ldoctype html> 
‘<html> 


1 
2 

3 

4 utf-8"> 

5 <titleych30 33.htnl</title> 
6 

7 

日 

9 


<styley 
fmyCanvas { border:zpx solid blue; } 
</styley 
</head> 


12 tscripty 
13 window.onload = function() { 


14 var obj = docunent.getElementById( "nyCanvas"); 
15 var ctx = obj.getContext("2d"); 

16 var radius = obj.width/2; 

17 cty.translate(radius, radius); 

18 ctx.lineCap = "round"; 

19 ctx.fillstyle = "blue"; 

20 ctx.fillRect(9,9,50, radius * 9.85); 
21 // 绽 制 时 针 数 字 1 

22 ctx,font = radiusyB.2 + "px sans-sei 
23 ctx,textBaseline="middle"; 

24 ctx.textAlign="center"; 

25 var digit = 1; 

26 var angle = digit * Math.PI / 6; 
好 ctx,rotate(angle); 

28 ctx,translate(0, -radius*0.8); 

29 ctx. rotate( -angle); 

39 // 绽 制 数字 的 底 图 

31 ctx.beginpath(); 

32 ctx,arc(0,9, radius*9.2,0,2*Math.PI); 
33 ctx. fillStyle = "W66FFFF"; 

34 ctx.fil1(); 

35 // 执行 绘制 1 

36 ctx.fillstyle = "black" 

37 ctx, fillText (digit.toString(),0,0); 
38 六 

39 </scripty 

48 </body> 

41 </html> 


执 和 


12 <script> 


13 var obj = document.getElementById("myCanvas"); 


14 var ctx = myCanvas.getContext("2d"); 
15 var radius = obj.height / 2; 

16 ctx.translate(radius, radius); 

17 radius = radius * 8.98; 

18 setInterval(drawClock, 1088) 
19 // 这 个 时 钟 的 原理 是 每 秒 重新 绘制 时 神 
29 function drawClock() { 

21 drawFace(ctx, radius); 

22 clockDigit(ctx, radius); 

23 timepointer(ctx, radius); 


} 


nyCanvas”width="266”height="298"> 浏 览 器 不 支持 canvas 元 素 </canvas> 


// 方块 富 色 
// 绘制 时 针 长 条 


// 字号 是 radius 的 28Xpx 
// 时 钟 歼 字 垂直 居中 
7/ 时 钟 数 宇 水 平 居中 


// 正 时 针 旋转 敖 字 1 出 现 位 置 
7/ 往 上 移动 原点 
// 复原 角度 


7/ 绘制 时 钟 中 心 点 
1/ 色彩 
/7/ 填 满 


// 输出 数字 1 


程序 实例 ch30_34.html : 设计 时 钟 。 
1 <!lDOCTYPE html> 

2 <htnl> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>ch38_34.html</title> 

6 <style> 

7 #myCanvas { border:2px solid blue; background-color:yellow;} 
8 «</style> 

9 </head> 

18 <body> 

11 <canvas id="myCanvas” width="300" height="300"></canvas> 


// 移动 坐标 原点 到 中 心 点 


25 
26 
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function drawFace(ctx, radius) { 
var grd; 
ctx.beginpath(); // 绘制 时 钟 内 部 
ctx.arc(e,euradius,B,2*Math.PI); 
ctx.fillstyle = ‘white’; 7/ 选 白色 
ctx.fi11(); // 白色 填 满 
Brd = ctx.createRadialGradient(@,8,radius™" radius"1.1); 
grd.addColorstop(8, "blue” 
grd.addColorstop(8.5, "aqua” 
grd.addColorstop(1, “blue” 
ctx.strokestyle = grd; 
ctx.linewidth = radius*@,. 
Ctx.stroke(); 
ctx.beginpath(); 
ctx.arc(8, 8, radius*@.1, 8, 2*Math.PI); // 给 制 时 钟 中 心 点 
ctx.fillstyle = "#66FFFF"; /1/ 色彩 
ctx.fil1(); // 填 满 
} 
function clockDigit(ctx, radius) { 
var angle; 
var digit; 
ctx.font = radius*8.2 + "px sans-serif"; // 字号 是 radius 的 28Xpx 
ctx.textBaseline="middle" // 时 钟 数字 委 直 居中 
// 时 钟 数字 水 平 居中 
for( digit = 1; digit <= 12; digit++){ // 计算 时 钟 12 个 数字 的 位 置 
angle = digit * Hath.pPI / 6; // 计算 时 神 数 字 的 角度 位 置 
ctx.rotate(angle); 7/ 正 时 针 旋 转 数字 出 现 位 置 
ctx.translate(@, -radius*e.8); 7/ 移动 原点 
ctx.rotate(-angle); /1/ 复原 角度 
// 给 制 数字 的 底 图 
ctx.beginpath(); 
ctx.arc(0,0,radius*0.15,8,2*Math.pI); // 绘制 时 钟 中 心 点 
ctx.fillStyle = “#66FFFF"; // 色彩 
ctx.f411(); // 十 请 
// 执行 给 制 涩 字 
ctx.fillstyle = “blue”; 
ctx.fillText(digit.tostring(), 8, 8); // 输出 时 钟 数字 
ctx.rotate(angle); 
ctx.translate(@, radius*9.8); 
ctx.rotate(-angle); 
} 
} 
function timepointer(ctx, radius){ 


Var now = new Date(); 
Var hour = now.getHours(); 
Var minute = now.getMinutes(); 
Var second = now.getSeconds(); 
// 绘制 时 针 
hour=hourX12; 
hour=(hour*Nath.pI/6)+(minute"Hath.pI/(6"68))+(second"Hath.PI/(360"68)); 
drawptr(ctx, hour, radius*9.4, radius*8.85); /1_radius 分 别 是 时 针 长 度 与 宽度 
// 绘制 分 针 
minute=(minute*Math. PI/30)+(second*Nath.PI/(39*68)); 
drawptr(ctx, minute, radius*8.55, radius"@.85); /1/_radius 分 别 是 分 针 长 度 与 完 度 
// 绘制 秒针 
second=(second*Math. PL/30); 
drauptr(ctx, second, radius*@, 


radius 


1); /7/1 radius 分 别 是 秒针 长 度 与 宽度 
} 
function drawptr(ctx, pos, len, width) { 1/ 实际 给 赤 时 儿 分 针 种 针 


ctx.beginpath(); 
ctx. linewidth = width; 
ctx.lineCap = "round"; 
ctx.moveTo(8,8); 
ctx.rotate(pos); 
ctx. lineTo(9, -len); 
ctx.stroke(]; 
ctx.rotate(-pos); 
条 
/script> 
</body> 
</html> 


士 
互 


执行 


HTML Canvas 给 


HTML5+CSS3 王者 归来 


习题 

1. 请 参考 ch30 8.html， 将 线条 宽度 增加 5 倍 ， 然 后 自行 建立 5 种 (2 色 ) 线性 渐变 ，5 种 3 色 以 上 
线性 渐变 ， 详 细 规 格 请 自行 确定 。 

2. 请 使 用 Canvas 元 素 ， 自 行 绘制 一 个 简单 的 漫画 人 物 。 

3. 请 绘制 矩形 ， 参 考 ch30 21.html， 设 计 10 种 辐射 渐变 ， 详 细 规 格 请 自行 确定 。 

4. 请 绘制 下 面 的 图 形 ， 提 示 : 圆 形 框 式 辐射 渐变 效果 。 


5. 请 参考 ch30_28.html， 设 计 可 以 用 单 击 功 能 按钮 方式 放大 或 缩小 图 片 的 应 用 ， 各 对 象 详细 规格 
可 以 自行 确定 。 

6. 重新 设计 ch30_29.html， 将 动画 图 改 成 圆 。 

7. 请 设计 一 个 走马 灯 ， 使 其 内 容 可 以 由 左 往 右 移动 。 走 马 灯 文字 以 及 详细 规格 可 以 自行 确定 。 


取得 用 户 的 经 纬度 数据 


本 章 摘要 

31-1 HTML 的 Geolocation 

31-2 getCurrentPosition() 

31-3 watchPosition() 和 clearWatch() 


HTML5 提供 有 可 以 获取 浏览 器 所 在 位 置 的 API 应 用 程序 ， 当 我 们 获取 位 置信 息 后 ， 可 以 搭 
配 Google Maps API， 在 网 页 显示 用 户 所 在 位 置 的 地 图 。 这 也 是 本 章 的 主题 。 

网 站 可 以 获得 用 户 位 置信 息 时 ， 就 可 以 提供 更 好 的 服务 给 使 用 者 ， 例 如 ， 可 以 提供 用 户 附近 
的 景点 、 商 店 、 加 油 站 、 停 车 场 等 信息 ， 甚 至 可 以 提供 导航 、 追 踪 用 户 移动 路 径 等 信息 。 当 网 站 
获取 到 所 有 用 户 信息 时 ， 就 可 以 用 这 些 信 息 进 行 大 数据 分 析 ， 判 断 用 户 的 习性 ， 种 种 商机 也 就 产 
生 了 。 


HTML5+CSS3 王者 归来 


| 31-1 | HTML 的 Geolocation 


我 们 身 处 在 移动 设备 盛行 的 时 代 ， 手 机 、 平 板 电脑 、PC、 汽 车 、 邮 轮 、 飞 机 等 设备 此 有 位 置信 
， 一 般 可 以 通过 下 列 方式 获取 位 置信 息 。 

GPS : 可 以 很 精确 地 提供 位 置信 息 ， 误 差 小 ， 缺 点 是 比较 耗 电 ， 定 位 速度 较 慢 。 

WiFi : 可 以 由 WiFi 取得 位 置信 息 。 

电话 公司 基地 台 : 可 以 使 用 三 角 定 位 法 获得 位 置信 息 。 

IP 地 址 : 可 以 由 IP 地 址 取得 位 置信 息 ， 特 别 是 对 固定 的 IP 地 址 ， 很 快 就 可 以 被 掌握 位 置信 

息 。 许 多 美国 动作 影片 ， 皆 是 以 固定 IP 地 址 取得 敌对 方 的 位 置信 息 。 这 种 方式 的 缺点 是 如 果 个 

人 装置 所 连接 的 IP 地 址 是 在 几乎 米 外 或 更 远 时 ，IP 地 址 将 不 再 是 用 户 位 置 ， 会 产生 误差 。 

使 用 HIML 的 Geolocation API 可 以 获得 用 户 的 位 置信 息 ， 对 于 一 些 拥有 GPS 的 装置 ， 例 如 
iPhone， 则 可 以 获得 非常 精确 的 信息 。 但 是 W3C 协会 考虑 到 使 用 者 的 隐私 问题 ， 所 以 第 一 次 使 用 时 
需要 用 户 同 意 ， 这 个 程序 才 可 以 运作 ， 当 使 用 者 同意 后 未 来 就 可 以 持续 使 用 了 。 程 序 设 计时 ， 读 者 
需 最 先 认识 的 对 象 是 navigator.geolocation 对 象 ， 各 种 定位 方法 与 相关 属性 ， 皆 是 它 的 子 对 象 。 可 以 
使 用 下 列 方法 获得 浏览 器 的 用 户 是 否 同意 给 予 位 置信 息 。 


if ( navigator.geolocation ) { 


OD OO OO OW 


语句 R; // 如 果 支 持 ， 执 行 此 语句 
} else { 
语句 B; // 如 果 不 支持 ， 执 行 此 语句 


} 
对 于 语句 A 而 言 ， 程 序 代 码 通 常用 于 设计 取得 浏览 器 位 置信 息 。 对 于 语句 B 而 言 ， 程 序 代码 通 


常用 于 列 出 错误 信息 。 
程序 实例 ch31_1.html : 判断 浏览 器 是 否 支持 提供 位 置信 息 。 

1 STPE html> 执行 结果 在 第 一 次 执行 时 可 以 看 到 是 
2 <html> 

3 cneta charset-"utf-8"> 否 允 许 获取 位 置信 息 的 选项 ， 请 确定 允许 。 
4 <title>ch31 1.html</title> 

5 《body> 

6 《<h1> 获 得 浏览 器 是 否 支 持 获 取 位 置信 息 </h1> 是 Ei 

7 *button onclick="getLocation()">Get Location</button> 获得 浏览 器 是 否 支 持 获 取 位 置信 息 

8 <p id="ex"></p> [Ge tocation | 

9 <script> 

16 var loc = document.getElementById("ex"); Etre rt 区 许 被 封锁 的 内 容 (A)| x | 

11 function getLocation() { // 是 否 可 取得 位 置信 息 

12 if ( navigator.geolocation ) { Bi 

1 alert(" 浏 览 器 支 持 显 示 位 置信 息 "); 下 面 是 执行 结果 。 

14 } else { | | 
15 alert ("浏览 器 不 支持 显示 位 置信 息 "); 获得 浏览 器 是 否 支持 获取 位 置信 息 

i } ne 
237 1} yt DE 
18 <¢/script> UL 站 7 i 
19 《/body> 


26 </html> 
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| 31-2 getCurrentPosition() 


取得 用 户 位 置信 息 的 API 是 getCurrentPosition0 方法 ， 如 果 使 用 者 的 浏览 器 同意 给 予 位 置信 息 
就 会 传 回 经 度 (longitude) 和 纬度 latitude) 信息 。 这 个 方法 的 使 用 格式 如 下 : 


getCurrentPosition ( onSuccess,onError,option 上 


在 使 用 时 也 可 以 省 略 第 2、3 个 参数 。 第 1 个 参数 onSuccess 是 一 个 回调 函数 ， 当 人 允许 获得 浏览 
器 地 理 位 置信 息 时 ， 由 这 个 回调 函数 可 以 获得 一 系列 信息 。 这 个 回调 函数 有 一 个 position 对象 ， 包 
会 coords 和 timestamp 属性 。coords 属性 本 身 也 是 一 个 对 象 ， 它 包含 下 列 地 理 位 置信 息 。 


口 “coords.latitude : 纬度 信息 。 

coords.longitude : 经 度 信息 。 

coords.accuracy : 位 置 准确 性 信息 ( 如 果 有 就 返回 )， 单 位 是 米 。 

coords.altitude : 海拔 高 度 信 息 ( 如 果 有 就 返回 ) ， 单 位 是 米 。 
coords.altitudeAccuracy : 海拔 高 度 准确 性 信息 ( 如 果 有 就 返回 ) ， 单 位 是 米 。 
coords.heading : 设备 前 进 方向 ， 用 正 北 的 顺 时 针 方向 角度 表示 ( 如 果 有 就 返回 ) 。 
coords.speed : 目前 前 进 速度 ( 如 果 有 就 返回 ) 。 

timestamp : 与 coords 一 样 是 个 对 象 ， 记 录 目 前 用 户 的 日 期 / 时间 ( 如 果 有 就 返回 ) 。 
程序 实例 ch31_2.html : 列 出 浏览 器 用 户 的 位 置 和 时 间 信息 。 

执行 结果 如 下 图 所 示 。 


3 <meta charset="utf-8"> 
4 <title>ch31 2.htmlc/title> 


丘 生 生日 全 日 全 


5 


<body> 
6 <h1> 获 得 用 户 的 位 置 (经 度 和 纬度 ) 信 息 </h1> 


获得 用 户 的 位 置 (经 度 和 纬度 ) 信 息 


7 <button onclick="getLocation()">Get Locationc/buttony {和 = 

8 xp id="ex"></p> 

9 <p id-"exTime"></py 6% ~ 
10 <script> 

11 var loc = document.getElementById("ex"); 4 六 ey Es 
12 var locTime ~ docunent.getElenenteyId("exTime"); 单 击 Get location 按钮 可 以 得 到 下 图 所 示 
13 function getLocation() { // 是 否 可 取得 位 置信 息 

14 if ( navigator.geolocation ) { 结果 。 

15 navigator .geolocation. getCurrentposition(displayPosition); 

16 } else{ > A 

17 1oc.innerHThL = "浏览 名 不 文 持 品 示 位 置信 息 "; 获得 用 户 的 位 置 (经 度 和 纬度 ) 信 息 

Ex 】 ET 

19 } 

20 。 function displayposition(position) { // 取得 与 列 出 经 纬度 信息 径 茜 : 121.534791 

21 loc.innerHTML = "经 度 : " + position.coords.longitude + 振 茜 : 25.109856 

22 "kbry 纬 度 : ”+ position coords.latitude; 2017 年 8 月 27 日 下 午 09.47.22 图 
23 Var x = new Date(position.timestamp); // 取得 时 间 字 符 来 

24 ]ocTime.innerHTML = x.toLocaleDatestring( ) +" "+ 

25 X,toLocaleTimestring( ); // 转 成 可 阅读 模式 


26 
27 </scripty 
28 </body> 
29 </html> 


其 实 getCurrentPosition() 方法 在 使 用 上 可 以 有 第 2 个 参数 onError， 这 是 一 个 错误 处 理 函 数 ， 这 
个 错误 处 理 函数 有 一 个 error 对 象 ， 它 有 一 个 属性 code， 用 于 返回 错误 信息 代码 。 由 这 个 错误 信息 代 
码 ， 程 序 设 计 师 可 以 知道 无 法 返回 用 户 位 置信 息 的 原因 。 下 列 是 可 能 的 code 错误 代码 信息 。 

PERMISSION_DENIED : 也 可 用 数值 “1” 代 表 ， 表 示 使 用 者 拒绝 提供 。 

POSITION_UNAVAILABLE : 也 可 用 数值 “2” 代 表 ， 表 示 目 前 没有 信息 。 
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TIMEOUT : 也 可 用 数值 “3” 代 表 ， 要 求 提供 信息 时 间 到 了 。 
UNKNOWN_ERROR : 不 明 原 因 错 误 。 


程序 实例 ch31_3.html : 重新 设计 ch31_2.html， 增 加 错误 信息 原因 处 理 函数 。 


<1DOCTYPE html> 行 疆 
de 执行 结果 


<meta charset="utf-8"> 
<title>ch31 3.html</title> pp rs 和 获得 用 户 的 位 置 (经 度 和 纬度 ) 信 息 
<body> -TE 
<ha> 获 得 用 户 的 位 置 (经 度 和 纬度 ) 信 息 </hly es 人 7) 一 | 
<button onclick="getLocation()">Get Location</button> [re 
<p id="px"></p> 
<script> 

var loc = document.getElementById("ex"); 

function getLocation() { // 是 否 可 取得 位 置信 息 

if ( navigator.geolocation ) { 
navigator.geolocation.getCurrentPosition(displayPosition, displayError); 


14 } else { 
15 loc.innerHTML = "浏览 器 不 支持 显示 位 置信 息 "; 
16 } 
7 } 
18 function dispioyposition(position) { // 取得 与 列 出 经 纬度 信息 
19 loc.innerHTML = "经 度 : " + position.coords.longitude + 
28 "<br> 纬 度 : ”+ position.coords.latitude; 
21 } 
22 function dispiayError(error) { // 列 出 无 法 取得 位 置信 息 原因 
23 switch(error.code) { 
24 case error.PERMISSION_DENIED: 
25 loc .innerHTML =“ 使 用 者 拒绝 提供 ” 
26 break; 
27 case error.POSITION_UNAVAILABLE: 
28 loc .znmerHTML = “目前 没有 位 置信 息 " 
29 break; 
30 case error. TIMEOUT: 
31 loc .innerHTML = “要求 提 供 信息 时 间 到 了 " 
32 break; 
33 case error.UNKNOWN_ERROR: 
34 loc .innerHTML =“" 不 明 原因 错误 ” 
35 break; 
36 } 
37 } 
38 </script> 
39 </body> 
48 </html> 
getCurrentPosition 的 第 3 个 参数 options 比较 少 用 ， 它 提供 一 些 选项 供 浏 览 器 参考 ， 可 以 是 
下 列 值 : 
口 enableHighAccuracy : 默认 值 是 false， 若 是 true 则 告诉 浏览 器 提供 高 精度 数据 。 
口 maximumAge : 设 定 浏览 器 响应 消息 的 有 效 时 间 ， 过 了 之 后 浏览 器 须 再 提供 新 信息 ， 单 位 是 
毫秒 (millisecond)。 上 默认 是 0 秒 ， 表 示 有 要 求 时 须 立 刻 响应 位 置信 息 。 
口 timeOut : 可 以 设 定 等 待 时 间 ， 如 果 超 过 就 使 用 错误 处 理 函 数 。 默 认 是 0 或 infinite， 表 示 没 有 


时 间 限 制 。 


| 31-3 | watchPosition() 和 clearWatch() 


Geolocation 对 象 还 有 其 他 两 个 方法 与 返回 位 置信 息 有 关 。 


口 watchPosition() : 可 以 返回 浏览 器 用 户 的 最 新 位 置信 息 。 这 个 方法 还 会 持续 返回 最 新 位 置信 


息 ， 就 好 像 我 们 开车 时 车 上 的 GPS 一 样 ， 会 持续 返回 位 置信 息 ， 协 助 我 们 了 解 距离 目的 地 的 
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距离 ; 或 是 我 们 拿 iPhone 手机 打开 地 图 ， 当 持续 在 外 面 走动 时 ， 可 以 发 现 手 机 上 标 着 我 们 位 
置 的 标记 是 随 我 们 移动 而 改变 的 。 
口 clearWatch() : 可 以 终止 watchPosition()。 
程序 实例 ch31_4.html : 重新 设计 ch31 2.html， 但 是 改 用 watchPosition() 方法 ， 同 时 简化 到 只 
列 出 地 理 位 置信 息 。 下 面具 列 出 了 与 ch31_2.html 不 同 的 程序 代码 ， 笔 者 只 是 将 getCurrentPosition() 
换 掉 。 


13 navigator.geolocation.watchposition(displayPosition); 


获得 用 户 的 位 置 (经 度 和 纬度 ) 信 息 


GetLocation ， 
经 度 : 121.534718 
纬度 : 25.109853 


建议 读者 将 上 述 程序 放 入 网 站 ， 然 后 用 手机 浏览 。 假 设 读者 现在 正 开 车 ， 只 要 按 一 下 Get 
Location 按钮 ， 即 可 看 到 经 纬度 数值 发 生变 化 。 


习题 

1. 请 重新 设计 ch31 2.html, 应 用 coords.accuracy、 coords.altitude 、coords.altitudeAccuracy、coords. 
heading、 coords.speed。 

2. 本 章 讲解 了 取得 浏览 者 地 理 位 置 的 方法 ， 也 讲解 了 标注 浏览 者 位 置 的 方法 ， 以 及 使 用 watchPosition() 
持续 返回 用 户 位 置信 息 的 方法 。 请 设计 一 个 地 图 程序 ， 并 将 这 个 程序 放 在 网 格 上 ， 然 后 将 手机 连 
入 网 络 ， 再 进入 地 图 程序 ， 现 在 你 可 以 到 处 逛 选 ， 请 由 手机 对 照 自己 目前 在 地 图 上 的 位 置 。 这 个 
作业 不 难 ， 当 你 实现 时 ， 就 具备 设计 导航 程序 的 基础 能 力 了 。 


jQuery Mobile 移动 版 网 页 设计 


本 章 摘要 

32-1 安装 Opera Mobile Classic Emulator 32-9 工具 栏 

32-2 ”我 的 第 一 个 采用 jQuery Mobile 设计 的 网 页 32-10 ”导航 栏 

32-3 jQuery 的 基本 网 页 架构 32-11 面板 (Panel) 
32-4 ” 超 链接 功能 32-12 可 折 径 区 块 
32-5 ”对 话 框 的 设计 32-13 ”建立 表格 
32-6 页面 的 切换 32-14 ”列表 显示 
32-7 建立 按钮 32-15 列表 符号 
32-8 ”弹出 框 的 设计 32-16 制作 输入 表单 


在 移动 设备 普及 的 今天 ， 如 何 设计 一 个 可 以 在 移动 设备 浏览 的 网 页 已 经 成 为 一 个 重要 的 课 
题 。 笔 者 前 面 已 经 介绍 过 HTML5、CSS3、JavaScript 了 ， 接 下 来 将 讲解 jQuery Mobile， 
这 是 一 个 专攻 设计 移动 设备 跨 平 台 网 页 的 系统 ， 也 是 目前 最 受 欢 迎 的 系统 。 

过 去 想 写 手机 应 用 程序 ， 会 依 操作 系统 类 型 ， 使 用 不 同 的 语言 ， 例 如 : 
口 在 Android 或 Blackberry 上 使 用 Java。 
口 在 iOS 上 使 用 Objective C。 
口 在 Window Phone 上 使 用 C# 和 :net 等 。 

如 今 使 用 jQuery Mobile 就 可 以 了 ， 限 于 篇 幅 ， 本 章 的 重点 是 引导 读者 裔 开 jQuery 设计 的 
大 门 ， 若 想 学 习 更 多 应 自行 参阅 相关 图 书 。 
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安装 Opera Mobile Classic Emulator 


使 用 jQuery 设计 移动 设备 用 的 网 页 时 ， 一 般 计算 机 的 浏览 器 不 太 适 合 做 测试 ， 最 好 是 用 手机 
或 平板 电脑 做 测试 。 如 果 没 有 这 些 设备 也 没关系 ， 可 以 安装 移动 设备 的 仿真 器 Opera Mobile Classic 
Emulator， 读 者 可 以 到 下 面 的 网 址 下 载 : 


http://www.opera.com/zh-tw/developer/mobile-emulator 


进入 网 页 后 将 看 到 下 列 画 面 : 单 击 Next 按钮 继续 。 
人 ai 


5- ol Oo 而 Setup - Opera Mobile Emulator «= — 吕 
CEEET IL. 


~ Select Start Menu Foler 0 
Opera Mobile Classic Emulator Where should Setup ploce the program's shortats? 


‘Setup wil crears the program's shoricus In the folowing Start Men folder. 


To contnee dk Next. Hf you would lice to select a different folder, chck Browse. 
TI 


Browse - 


口 oemtaeete ostort Menu folder 


Do your mabe dovelopment sgaght hom your doshtop and par t wh Opera Dragongy for advancea aosuggmng 
Opara Moblls clasale Emulator 12.1 for Windoysy 


aock | Neri> Concel | 


请 选择 当前 计算 机 的 作业 环境 ， 接 下 来 采用 到 Setup -Opera Mobile Emulator — © EN 
默认 设置 安装 即 可 。 a 


men saduona nsts moud be performed? 0" 
[9 Setup -Opera Mobile Emulator -— EE 
Seloct he advonal tacks you would Ihe Setup to porform whlo nzaltng opara 
able Emuator hon dhck Ne 
Welcome to the Opera Mobile 
Emulator Setup Wizard CR 


crecte a desktop em 


Tha wal naal Opera Noble Emuiator on your computer Craate a Quokck Launch kon 


his recommended that you cose ol other applcatons 
before cpntmung 


Chek Nese to cortnue, or Cancel to wnt Setup. 


Opera Mobie la Ee 
a 然后 单 击 Install 按钮 。 
而 Setup - Opera Mobile Emulator = — 澡 
Raney tw moran me 
[9 Setup - Opera Mobile Emulator ”一 口 Scip € row road to begn neaine opera Moble Emuietor on yor 0: 
2 
oataaaan 而 运 
Where should Opera Mobile Emulator be installed? Olick Instell to continve with the instollotion or click Back fF you wont to review or 
Se 
a Pe 


CNProgram Fles 66)VOper Noble Emulator 
To aaatmue chck No. fyou would Me to selact a diferant olar dk arowee 


E 一 Opere able Ermdator 
[serowe 


Me least 39.3 MB of free disk space srequired 


< gack sa canca | 


Beck | Wea> CE] 
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下 图 所 示 为 安装 完成 的 画面 ， 单 击 Finish 
按钮 。 


Lo Setup - Opera Mobile Emulator 


Completing the Opera Mobile 
Emulator Setup Wizard 


Setup has finished installing Opera Moblle Emulator on your 
computer. The applcaton may be launched by selectng the 
installed icons. 


Click Fnisn to ext Setup. 


回 taunch opera Moble Emulator 


Opera Mobie 


Fnish 


启动 程序 时 将 询问 要 使 用 的 语言 ， 设 置 好 后 
单 击 OK 按钮 。 


@ Chooselanguage ? 匡 到 
English 
V| Show this dialog again on startup 


此 时 将 看 到 下 列 画 面 ， 单 击 Launch 按钮 。 


此 时 可 以 看 到 下 图 所 示 的 Opera Mobile 
Classic Emulator 启动 屏幕 。 


ope Mobile -custom — 口 酉 


国 - 


Ce 00 PAL 23 Gy ON = 


之 后 只 要 将 所 设计 的 HTML 文件 拖 电 至 “ 输 
入 网 址 ”输入 框 ， 就 可 浏览 所 设计 的 网 页 了 。 


ey 我 的 第 一 个 采用 jQuery Mobile 设计 的 网 页 


jQuery 是 JavaScript 的 函数 库 ， 有 函数 库 的 辅助 可 以 大 大 缩短 JavaScript 开发 网 页 的 时 间 。 本 章 的 
重点 是 使 用 jQuery Mobile 开发 移动 版 网 页 。 要 想 开发 jQuery Mobile 网 页 需 引用 3 份 资料 : 
口 与 jQuery Mobile 相关 的 CSS 样式 表 “jquery.mobile-1.4.5.css"。 
口 与 jQuery 有 关 的 JavaScript 函数 库 “jquery.js”。 
口 与 jQuery Mobile 有 关 的 JavaScript 函数 库 “jquery.mobile-1.4.5.js”。 

有 两 种 方法 取得 上 述 资料 ， 一 是 直接 到 jQuery 官网 下 载 ， 下 载 完 成 后 ， 将 文件 放 在 与 程序 相同 
的 项 目 文件 夹 即 可 。 这 时 <head> 元 素 应 该 包含 下 列 内 容 : 


<head> 


<meta name="viewport" content="width-device-width, initial-scale=1"> 


<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 


<script src="jquery.js"></script> 


<script src="jquery.mobile-1.4.5.js"></script> 


</head> 
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下 列 是 下 载 网 址 : 

http://www.jquery.com/download/ 

http://www.jquerymobile.com/download/ 

另 一 种 是 到 jQuery Mobile 的 http://www.jquerymobile.com/download/ 网 站 ， 搜 索 Copy-and-Paste 
snippet for jQuery CDN hosted files 字符 串 ， 可 参考 下 图 。 


htpi/jquerymobilecom/download/ D7 Ooowno.. x | 
芥 ~ 国 - 本 哪 ” 网 页 P)> 安全 性 


Uncompressed with Default iheme- jiguery mobile-1.4.5 css (usefulfor debugging) 


Minified and Gzipped with Default theme: jquery mobile-1 4 5.min.css (full library, ready to deploy) 


Uncompressed structure without a theme- iquery mobile-1 4 5 css (useful for theme development) 
» Minified and Gzipped structure without a theme: iquery mobile-1.4.5.min css (to be used with custom theme and icon CSS, ready 


to deploy) 


TJQuery CDN hosted files: 


Copy-and-B 


1 | <link rel="stylesheet" href="http://code.jquery.com/mobiLe/1.4.5/jquery-mobite-1.4.5.min.css' /> 
"http://code. jquery.com/jquery-1.11.1.min.js"></script> 
ipt src="http://code.jquery. com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">¢/script> 


然后 将 上 图 所 示 的 数据 复制 到 每 一 个 HTML 文件 ， 放 在 <head> 和 </head> 标记 内 即 可 。 这 也 


是 笔者 建议 各 位 以 及 笔者 所 采用 的 方法 。 
程序 实例 ch32_1.html : 我 的 第 一 个 jQuery Mobile 移动 版 网 页 程序 。 


<!ldoctype html> 一 
<html> 执行 结果 


1 

2 

3 <head> 

4 <neta charset="utf-8"> © open Mobie - Custom - 口 棋 汪 
5 <neta name="viewport” content="width=device-width, initial-scale=1.0"> 

6 <title>ch32_1.htnl</title> 

7 <link rel="stylesheet" href="http://code, jquery. com/mobile/1.4.5/iquery. mobile-1.4,.5.min.css” /> te ell CIID 


8 <script src="http://code, jquery. com/jquery-1.11.1.min, js"></script> 

9 <script src="http://code, jquery, com/mobile/1,.4,5/iquery. mobile-1.4.5.min,is"></script> 
10 </head> 

11 <body> 

12 </body> 

13 </html> 


因为 网 页 设计 里 面 没有 任何 内 容 ， 所 以 是 空白 画面 。 


jQuery 的 基本 网 页 架构 


jQuery 的 网 页 架构 由 一 个 或 多 个 页 面 (page) 组 成 ， 每 一 个 页 面 的 基本 架构 是 由 header (页 
首 )、content (内容)、footer (页 尾 ) 所 组 成 。 下 面 是 jQuery 页 面 的 基本 架构 。 
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<div data-role="page"> <!- -定义 jouery 页 面 - -> 
<div data-role="header"> 
页 首 内 容 区 
</div> 


<div data-role="content"> 
页 面 内 容 区 


</div> 


<div data-role="footer"> 
页 尾 内 容 区 
</div> 
</div> 


读者 可 将 data-role 想 成 角色 ， 下 列 是 常 看 到 的 data-role 设 定 : 


口 header : 页 首 ， 它 的 内 容 会 安置 在 浏览 器 上 方 ， 同 时 背景 有 灰色 长 条 ， 也 可 视 为 工具 栏 
(toolbar )， 该 区 一 般 放置 标题 或 搜索 按钮 。 

口 content : 页 面 内 容 区 ， 可 以 将 HTML 中 的 <h1>、<p>、<img>、<ul>、<li> 等 元 素 放 在 
此 区 。 

口 _main : 也 是 定义 页 面 内 容 区 ， 如 果 有 许多 主题 内 容 ， 可 先 定义 内 容 ， 再 区 分 次 内 容 ， 也 可 以 将 
HTML 中 的 <h1>、<p>、<img>、<ul>、<li> 等 元 素 放 在 此 区 。 

口 footer : 页 尾 ， 它 的 内 容 会 被 安置 在 浏览 器 下 方 ， 同 时 背景 有 灰色 长 条 。 


后 面 的 章节 会 介绍 更 多 data-role 的 内 容 。 
程序 实例 ch32_2.html : 正式 制作 jQuery Mobile 移动 版 网 页 程序 。 


1 <ldoctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

6 <title>ch32 2.html</title> 

7 <link rel="stylesheet” href="http://code, jquery.com/mobile/1.4.5/ijiquery.mobile-1.4,5.min,css" /> 
8 <script src="http://code,jiquery.com/jquery-1,11.1,min,js"></script> 

9 <script src="http://code, iquery. com/mobile/1.4.5/iquery.mobile-1,4,.5.min,is"></script> 
10 </head> 

11 <body> 

12 <div data-role="page"> 

13 <div data-role="header"> 

14 <h1> 深 石 数字 </hi> 

15 </div> 

16 <div data-role="content"> 


17 <p> 深 度 学 习 滴水 穿 石 </p> 
18 <p>Deep Learning</p> 

19 </div> 

20 <div data-role="footer"> 
21 <h1> 台 北市 南京 东 路 </h1> 
22 </div> 

23 </div> 

24 «</body> 

25 </html> 


序 实例 ch32_3.html : 将 页 尾 固 定 在 页 面 下 方 ， 其 实 只 要 将 上 例 第 20 行 改 为 下 面 的 代码 即 可 。 


20 <div data-role="footer"” data-position="fixed"> 
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下 方 左 图 为 ch32_2.html 的 执行 结果 ， 下 方 右 图 为 ch32_3 html 的 执行 结果 。 


LE Er | 


© pom een -Coom 


EE 于 5M 字 


轨 生 后 习 江水 和 厂 理子 习 油水 友 石 
Deep learng Deep tearnng 


二 市 二 京东 


和 二 布吉 东 吕 


一 个 html 文件 想 要 设计 成 二 份 页 面 很 容易 ， 只 要 设 定 成 如 下 形式 即 可 。 
<div data-role="page" id="xxx"> <!-- 定义 jQuery 页面 --> 
页 面 真实 内 容 区 
</div> 
<div data-role="page" id="yyy"> <!1-- 定义 jQuery 页 面 --> 
页 面 真实 内 容 
</div> 
这 时 需 在 data-role 为 page 的 <div> 元 素 内 增加 页 面 识别 id 定义 ， 有 了 这 个 定义 ， 将 来 就 可 在 
页 面 间 切 换 。 
程序 实例 ch32_4.html : 两 份 文件 页 面 切换 的 应 用 。 下 面 笔者 只 列 出 <body> 元 素 之 内 容 ， 第 13 行 
定义 第 一 页 的 id 是 “pagel”， 第 27 行 定义 第 一 页 的 id 是 “page2”， 读 者 需 留意 第 20 行 和 第 34 行 
超 链 接 的 语法 。 
11 <body> 38 -</div> 
12 <1-- 定义 第 一 页 --> 39 </div> 


13 <div data-role="page”jid="pagel"> 40 </body> 
14 <div data-role="header"> 


网 


15 <h1> 深 石 数字 </hly 

16 </div> 行 

17 «div data-role="content"> 执行 结果 

18 《p> 深度 学 习 滴 水 穿 石 </p> 日 open Mobie -cion — 5 OG open obie -Cntom 二 国 本 | 
19 <p>Deep Learning¢/p> 

21 </div> 

22 <div data-role="footer”data-position="fixed"> 

23 <h1> 台 北市 南京 东 路 </h1> 

Wi 深度 学习 湾 水 穿 厂 深 石 Deepstone 

25 </div> Deep Learning IBM Deepblue Google Deepmind 
26 xl-- 定义 第 二 页 --> wi) fy 

27 <div data-role="page” id="page2"> ~ = 

28 <div data-role="header" 

29 <h1> 深 石 契 子 c/h1> 

30 </div> 

34 <div data-role="content"> 

32 <p> 深 石 DeepStone</p> 

33 <p>IBM Deepblue Google Deepmind</p> 

34 <p> 返 回 <a href="#page1"> 首 页 </a></p> i 


35 </div> 


36 <div data-role="footer” data-position="fixed"> Bd 局 画 - 和 和 局 一 - 


37 <h1> 台 北市 南京 东 路 </hl> Ca Emma ooreod mL 四 To 
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Ep 和 对 话 框 的 设计 


若是 想 要 设计 对 话 框 ， 可 以 在 定义 页 面 的 <div> 标记 内 增加 下 列 属性 设 定 : 

data-dialog="true" <-- 可 参考 程序 实例 ch32 5.html 第 27 行 --> 

至 于 对 话 框 要 切换 回首 页 的 方法 可 参考 前 一 节 。 在 下 列 程序 设计 中 ， 笔 者 在 定义 页 面 的 <div> 
标记 内 增加 了 data-title 属性 ， 这 个 属性 可 以 设 定 网 址 区 上 方 的 标题 ， 下 面 是 程序 代码 : 


13 «<div data-role="page” data-title="Silicon Stone 国 际 认 证 ”id="pagel"> 


下 图 所 示 为 所 建立 的 标题 。 


程序 实例 ch32_5.html : 对 话 框 的 设计 。 
2 入 划 页 执行 结果 


13 <div data-role="page”data-title="silicon Stone 国 际 认 证 " id="page1"> 

14 <div data-role="header"> © 
15 <pySilicon Stone Education</p> 

二 | Ce Ce 


17 <div data-role="content"> 


18 <h3>Web Design 系 列 </h3> © 二 


-°° 6 Open Mobie -Custom - = 


19 <py><a href="#page2">HTML5</a></p> 

29 《py>CSS3</P> Web Deslgn 系 列 There are many tools for deslgning 
21 </div> We a website, but the most 

<div data-role="footer" data-position="fixed"> fundamental undoubtedly will be 
23 <h1> 台 北市 南京 东 路 </h1> 和 

24 </div> 返回 Sllicon Stone 国 际 认证 

25 </div> 


26 <1-- 定义 对 话 框 --> 


a 台北 市 南京 东 路 
27 «<div data-role="page” data-dialog="true” id-"page2"> 

28 <div data-role="header"> 

29 <hi>HTMLS</h1> 

30 </div> 

31 <div data-role="content"> 

32 <p>There are many tools for designing a website, but the most RE 

33 fundamental undoubtedly will be HTML.</p> ed 避 印 

34 《py 返回 ka href-"#pagel">5ilicon Stone 国 际 认证 4/ayk/p> 一 Emma rr ee00 Prt 233 [By 0 


35 «</div> 

36 «<div data-role="footer" data-position="fixed"> 
37 <h1> 台 北市 南京 东 路 </hi> 

38 </div> 

39 </div> 

49 «</body> 


页 面 的 切换 


jQuery 提供 许多 种 页 面 切换 方法 ， 可 以 用 下 列 data-transition 属性 设 定 。 
fade : 默认 值 ， 即 页 面 淡化 到 下 一 页 。 

flip : 从 后 向 前 翻转 。 

flow : 流动 方式 ， 即 这 一 页 离开 ， 下 一 页 进入 。 

pop : 弹出 的 方式 。 

slide : 从 右 向 左 滑 入 。 


OOOO DO 
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slidefade : 从 右 向 左 滑 入 ， 同 时 有 淡化 效果 。 
slidedown : 从 上 往 下 滑 入 。 

turn : 转 到 下 一 页 。 

none : 没有 特效 。 

如 果 希 望 反方 向 切换 页 面 ， 可 增加 如 下 设 定 。 


data-direction="reverse" 


程序 实例 ch32_6.html : 重新 修改 ch32_4.html 为 页 面 切 换 的 设计 ， 下 面具 列 出 所 设 定 页 面 切换 的 
程序 代码 ， 首 先 由 右 向 左 滑 入 的 程序 代码 。 


OODOODO DO 


29 <p> 认 识 <a href="#page2”data-transition="slide"> 深 石 </a></p> 
其 次 是 由 左 到 右 滑 入 的 程序 代码 。 
34 <p> 返 回 <a href="#pagel”data-transition="slide”data-direction="reverse"> 首 页 </a></p> 


除了 切换 效果 外 ， 基 本 与 ch32_4 html 相同 。 


7 和 建立 按钮 
jQuery Mobile 提供 了 3 种 方法 用 于 建立 按钮 。 


32-7-1 使 用 <input> 元 素 建立 按钮 
使 用 <input> 元 素 建立 按钮 的 基本 格式 如 下 : 


<input type="button" value="NameofButton"> 
程序 实例 ch32_7.html : 重新 设计 ch32_3.html， 在 内 容 区 增加 按钮 。 
11 <body> = © opera Mobile -Custom — 9 EN 
12 <div data-role="page"> 执行 结果 pn 


13 <div data-role="header"> 
14 <h1> 深 石 数字 </h1> 

15 -</div> 深 石 数字 
16 <div data-role="content"> 

17 <p> 深 度 学 习 滴 水 穿 石 </p> 

18 <input type="button”value="Test"y 深度 学 习 滴水 穿 石 

19 </div> 

29 <div data-role="footer”data-position="fixed "> Test 
21 <h1> 台 北市 南京 东 路 </h1> 

22 </div> 

23 </div> 

24 </body> 


台北 市 南京 东 路 
已 团 - 
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32-7-2 使 用 <button> 元 素 建立 按钮 


使 用 <button> 元 素 ， 同 时 将 class 设 定 为 ui-btn。 
程序 实例 ch32_8.html : 重新 设计 ch32 7.html， 使 用 <button> 元 素 。 这 个 程序 只 修改 了 一 行 。 


18 <button class="ui-btn">Test</button> 
:与 ch32 7.html 相同 。 
32-7-3 使 用 <a> 元 素 建立 按钮 


使 用 <a> 元 素 ， 同 时 将 class 设 定 为 ui-btn。 
程序 实例 ch32_9.html : 重新 设计 ch32_ 7.html， 使 用 <button> 元 素 。 这 个 程序 只 修改 了 一 行 。 超 
链接 属性 href 可 以 是 任意 的 超 链接 。 


18 <a href="#" class="ui-btn">Test</a> 


ei 和 上 车 与 ch32 7html 相同 。 


32-7-4 ”按钮 图 标 


jQuery Mobile 提供 了 一 系列 的 图 标 ， 可 以 让 按钮 设计 得 更 吸引 人 ， 下 列 是 按钮 名 称 与 对 应 的 实际 图 标 。 


ui-icon-arrow-l: © ui-icon-arrow-T : © ui-icon-info : OO ui-icon-delete : © 
ui-icon-back: © ui-icon-audio: @ ui-icon-lock: © ui-icon-search : ® 
ui-icon-alert : © Ui-icon-grid : 理 ui-icon-home : © 


32-7-5 ” 设 定 按钮 图 标的 位 置 


可 以 使 用 ui-btn-icon 类 别 设 定 图 标 位 置 为 上 (top)、 右 (right)、 下 (bottom) 和 左 (left)。 须 
留意 ， 如 果 使 用 <a> 元 素 建 立 按钮 ， 当 选 定 图 标 后 ， 一 定 要 设 定 图 标 位 置 ， 否 则 不 会 显示 图 标 。 
程序 实例 ch32_10.html : 按钮 含 图 标的 应 用 ， 本 程序 同时 也 设 定 了 图 标的 位 置 。 


11 <body> 
12 <div data-role="page"> 执行 结果 


3 <div data-role="header"> 
14 <hay 深 石 数字 </ha> © Opera Mobile - 
15 xjdivy 


16 <div data-role-"content"> fleV/localhostCyUser: 离 


btn ui-icon-home ui-btn-icon-top"> 返 回 Home</ay 深 石 数字 
btn ui-icon-arrow-r ui-btn-icon-right”>Big Datac/ay 
btn ui-icon-arrow-l ui-btn-icon-left">web Design</a> 


a1 ka href-"s” class-"ui-btn ui-icon-info ui-btn-icon-bottom>Informationc/ay 深度 学 习 注水 穿 石 
22 </div> 
23 <div data-role="footer” data-position="fixed"> [a] 
2 <h1> 台 北市 南京 东 路 </hi> 
25 </div> ee 
26 </div> 
27 </body> Blg Data © 
© Web Deslgn 
Jnformation 
O 
台北 市 南京 东 路 


C0 


am ER 
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32-7-6 更 多 图 标 设 定 
下 列 是 一 些 图 标 设 定 的 说 明 : 


口 ui-shadow : 图 标 增 加 阴影 。 口 _ui-alt-icon : 图 标 是 黑色 。 
口 _ui-btn-icon-notext : 隐藏 图 标 文字 。 口 ui-nodisc-icon : 不 含 外 框 。 


程序 实例 ch32_11.html : 不 含 文字 按钮 ， 以 及 各 种 不 同 按钮 的 设计 。 


11 xbodyy 

12 <div data-role="page"> 执行 
13 <div data-role="header"> 

14 <hly 深 石 数字 </hly> 


< © parvoie-cuon -| 
15 </div> 数字 


16 <div data-role="content"> 
17 《> 深度 学 习 滴水 穿 石 </p> file:/localhost/C/User: 请 【cooge ] 


18 ”class-"ui-btn ui-icon-home ui-btn-icon-notext">Hone/a> 二 二 
19 " class-"ui-btn ui-icon-home ui-btn-icon-notext 
2 ui-alt-icon">Honec/a> 
21 <a hret " class="ui-btn vi-icon-search ui-btn-icon-notext">Search</a> 深度 学 习 滴水 穿 石 
2 ka href-"#" class-"ui-btn ui-icon-search ui-corner-all ui-btn-icon-notext 
3 ui-nodisc-icon">Search/a> [n) 
24 </div> 
25 <div data-role-"footer”" data-position="fixed"> 全 
26 <hl> 各 北市 南京 东 路 </h1> @ 
7 cjdiv> 
28 </div> 
29 </body> 
台北 市 南京 东 路 
避 团 - 
二 一 ooeoo pz 6 IO » 


下 列 是 另外 两 个 常用 按钮 设 定 的 说 明 : 


口 _ui-btn-inline : 按钮 可 以 只 有 包含 它 的 内 容 ， 不 会 占据 整 行 ， 在 此 情况 下 按钮 可 以 相 邻 。 
口 ”ui-corner-all : 为 按钮 加 圆 角 框 。 


程序 实例 ch32_12.html : 建立 相 邻 的 按钮 ， 同 时 为 按钮 加 上 圆 角 框 。 


11 <body> 

12 <div data-role="page"> 执 和 

13 <div data-role-"header"> 

14 <h1> 深 石 数字 </h1> © Opera Mobile - Custom L > 
15 </div> 


16 <div data-role="content"> file//localhosUC:/User: 请 


17 <a href-"#" class-"ui-btn ui-btn-inline ui-corner-all"》 深 度 学 习 </ay 
18 <a href-"#" class-"ui-btn ui-btn-inline ui-corner-all"y 滴 水 穿 石 </ay 深 石 数字 
19 </div> 

20 <div data-role-"footer" data-position-"fixed"> 


21 <h1> 台 北市 南京 东 路 </h1> 深度 学 习 清水 穿 石 
22 </div> 
23 </div> 
24 </body> 
台北 市 南京 东 路 
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ER: 基 弹出 框 的 设计 


弹出 框 (Popups) 与 对 话 框 有 些 类 似 ， 皆 会 弹出 显示 一 些 文字 ， 如 果 你 想 要 显示 一 些 简短 文 
字 、 图 片 、 地 图 等 ， 这 是 一 个 好 的 工具 ， 设 计 方 法 如 下 : 


<a href="#xxx" data-rel="popup" class="”'…。 "> <!-- 超 链接 设计 --> 
<div data-role="popup" id="xxx"> <1-- Popups 设计 --> 


程序 实例 ch32_13.html : 弹出 框 的 设计 。 单 击 “ 深 度 学 习 ” 按 钮 ， 可 以 出 现 弹 出 框 。 


11 《body> 人行 疆 
12 <div data-role="page"y 执行 结果 


13 <div data-role="header"> 


远 <h1> 深 石 数字 </hi> © Open Mobie- Catom = = 6 Op Mcbin -curiom — 

16 <div okonole: So > , 本 站 深 石 数字 深 石 数字 

17 <a href="#myPopup” data-rel="popup” class="ui-btn ui-btn-inline 

18 凡 -corner-all"> 深 度 学 习 </a> pp Remsen uanArun | 
的 在 二 学习 系 纺 


19 </div> 
29 <div data-role="popup”id="myPopup"> 


21 《py> 深 石 数字 公司 开发 了 一 套 具 有 人 工 智 能 的 在 线 学 习 系统 4/p> 

22 </div> 

23 <div data-role="footer”data-position="fixed"> 

24 <h1> 台 北市 南京 东 路 </h1> 

25 </div> 

26 </div> 

27 《/body> 台北 市 南京 东 路 台北 市 南京 东 路 


上 述 弹 出 框 的 内 间距 (padding) 较 少 ， 如 果 希 望 增加 ， 可 以 参考 下 面 的 实例 增加 “class=ui- 
content” 的 设 定 。 
程序 实例 ch32_14.html : 增加 弹出 框 的 内 间距 。 本 程序 其 实 只 是 更 改 了 ch32_13.html 的 第 20 行 。 


20 <div data-role="popup" id="myPopup" ctLass="ui~-content"> 执行 结果 


深 石 数字 


深 石 数字 公司 开发 了 一 套 具 有 人 工 智 
能 的 在 线 学 习 系 统 


32-9 工具 栏 


工具 栏 一 般 是 放 在 页 首 区 或 页 尾 区 ， 这 一 节 将 讲解 这 方面 的 应 用 。 
32-9-1 页 首 区 


在 页 首 区 虽然 已 经 有 页 面 标题 了 ， 但 是 还 是 可 以 在 页 首 区 放 几 个 工具 钮 ， 例 如 ，Home 将 按钮 
放 在 左边 ，Search 按钮 放 在 右边 。 
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程序 实例 ch32_15.html : 在 页 首 区 建立 工具 按钮 的 应 用 。 
11 <body> 


一 全 
12 xdiv data-role="page” 执行 结果 


class="ui-btn ui-corner-all ui-shadow ui-icon-home 
15 ui-btn-icon-left">Home</a> 


file://localhost/C:/User: 会 


16 

87 class="ui-btn ui-corner-all ui-shadow ui-icon-search 

18 ui-btn-icon-left">Search</a> © Home 深 石 数字 @ search 
19 </div> 

20 <div data-role="content"> 

21 《p>Toolbars 中 Header Bars 的 应 用 </p> Toolbars 中 Header Bars 的 应 用 

22 “/div> 

23 </div> 

24 </body> 


32-9-2 页 尾 区 


尽管 笔者 先前 都 是 将 公司 地 址 放 在 页 尾 区 ， 但 有 时 也 会 利用 公司 网 页 的 页 尾 区 邀请 浏览 者 关注 
Facebook 或 微 博 账号 。 
程序 实例 ch32_16.html : 建立 页 尾 区 功能 按钮 的 应 用 。 


11 <body> A 

12 «<div data-role=" 执行 结果 

13 <div data- © Opea Mobie Cion — SN 
14 <a href: -btn vi-corner-all ui-shadow ui-icon-home 

16 <h1> 深 石 数字 </h1> OO Wome 深 夏 字 加 so 
17 <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search 

18 ui-btn-icon-left">search</a> a 
19 </div> 应 用 

29 <div data-role="content "> 

21 <p>Toolbars 中 Header Bars 和 Footer Bars 的 应 用 </p> 

22 </div> 

23 <div data-role="footer" data-position="fixed"> 

24 class="ui-btn uvi-corner-all ui-shadow ui-icon-plus 

25 on- left"> 加 我 到 Facebook</a> 

26 <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus 

27 ui-btn-icon-left"> 加 我 到 wechat</ay 

28 </div> naaracbook © mlechat 

29 </div> 

30 </boy> 


ry oa m2 iON» 


上 述 程序 的 页 尾 区 按钮 没有 居中 对 齐 ， 如 果 想 要 居中 对 齐 可 以 使 用 CSS 样式 表单 ， 参 考 下 述 
实例 。 
程序 实例 ch32_17.html : 重新 设计 ch32_16.html， 将 页 尾 区 的 功能 按钮 居中 对 齐 。 本 程序 只 增加 了 
如 下 CSS 样式 表单 。 


23 <div data-role="footer” data-position="fixed" style="text-align:center;"> 


可 参考 上 方 右 图 。 


2-10 区 77- 于 到 到 EE 


导航 栏 的 特色 是 包含 一 系列 的 超 链 接 ， 并 且 水 平 放 置 ， 一 般 会 安置 在 页 首 区 或 页 尾 区 。 声 明 导 
航 栏 的 方法 是 在 <div> 元 素 内 声明 data-role=“navbar”。 导 航 栏 内 的 超 链接 会 自动 转 为 按钮 ， 同 时 按 
钮 会 均 分 导航 栏 宽 度 。 如 果 有 多 于 5 个 的 按钮 会 被 分 成 两 行 显示 在 导航 栏 。 
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程序 实例 ch32_18.html : 导航 栏 的 应 用 ， 这 个 程序 为 导 览 列 设 计 了 4 个 超 链 接 。 


11 <body> 
12 “div data-role="page"> 


13 <div data-role= "header "> 执 和 :了 
14 <h1> 深 石 数字 </h1> 

15 <div data-role="navbar"> © ope Mobie -Cust 
16 <ul> 

17 <liy<a > 信息 出 版 </a></1i> 


18 <]i><a 
19 <li><a 


> 财经 出 版 </a></1i> 深 厂 数字 
国际 认证 </a></1i> 信和 出 版 。 风 栓 版。 认证。 jabram 


26 <li><a >JobExam</a></1i> 

21 dob Nawgation Bars 的 应 用 
22 </div> 

23 </div> 

24 <div data-role="content"> 

25 <p>Navigation Bars 的 应 用 </p> 


26 </div> 
27 <div data-role="foot 


" data-position="fixed" style="text-align:center;"> 


28 btn ui-corner-all ui-shadow ui-icon-plus 

29 "> 加 我 到 Facebook</a> © nmevook © mawecat 
39 <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus 器 回 - 
31 ui-btn-icon-left"> 加 我 到 Wechat</a> mm Emmag 
32 </divy 

33 </div> 

34 </body> 


程序 实例 ch32_19.html : 重新 设计 ch32_18.html， 为 导航 栏 内 的 超 链接 建立 图 标 ， 下 面 只 列 出 了 
与 ch32_18.html 不 同 的 代码 。 


15 <div data-role="navbar"> 执行 结果 
16 <ul> 


17 <liy<a href="#" data-icon="home">Home</a></1i> apeawebk cuion - 5 节 
18 <liya data-icon-"arrow-r"> 信 息 出 版 (Ja></1i> | em 
19 <li><a data-icon="arrow-r"> 国 际 认证 </a></1i> - EE CED 
29 <liy¢a href="#" data-icon="info">Help</a></1i> 

21 </ul> 过 | || 局 
22 /div> 


Navlgtion Bars 的 而 用 


© werocebook © oanwechet 


目前 以 上 所 有 的 按钮 ， 若 是 单 击 可 产生 按钮 被 按 的 蓝 色 底 色 ， 其 实 我 们 可 以 在 超 链 接 中 设 定 
class="ui-btn-active" 来 呈现 按钮 被 按 下 的 效果 。 
程序 实例 ch32_20.html : 重新 设计 ch32_19.html， 事 先 设 定 Home 按钮 被 按 下 的 效果 。 修 改 的 代码 
如 下 。 


17 <li><a href="#" data-icon="home” class="ui-btn-active">Home</a></\li> 


© pen Mabie cutom - 芭 


深 石 数字 


加 22. : 
Ee 


Navigation Bars 的 应 用 
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ep 面板 (Panel ) 


jQuery 的 面板 功能 主要 是 可 以 增加 额外 的 显示 空间 ， 执 行 时 正常 版 面 会 由 左 向 右 滑 动 ， 这 样 就 
可 以 看 到 下 一 层 的 区 块 ， 即 面板 (Panel)。 这 个 功能 在 使 用 前 须 先 声明 : 


<div data-role="Panel" id: 


面板 内 容 


</div> 
程序 实例 ch32_21.html : 面板 的 基本 应 用 。 
11 <body> 


12 <div data-role="page”id="pagel"> 
1 <div data-role="header”> 


14 <h1> 深 厂 数字 </h1> 下 © apenbk -cum - 5 
15 </div> 
16 。 <div data-role-"panel” <1-- 建立 Panel 内 容 --> CC CB 
17 <h2>panel 的 小 字 
18 ened 外 可 以 关闭 Panel</p> Panel 的 应 用 
19 </div> 

Pei 按 血本 以 9 
29 «div data-roler"content"> unol 和 0GFdywwi 时 机 Pane (区 外 可 以 关闭 Panel 
21 《p> 单 击 Panel 按 钮 可 以 开启 Panel</p> pp 四 
22 <a href="smypanel” class="ui-btn ui-btn-inline ui-corner-all"> 开 局 Panel</a> 和 
3 /div> 
24 </div> 
25 </body> 

局 加 局 加 


在 设计 面板 时 可 以 使 用 下 列 属性 设 定 面板 显示 方式 : 
口 data-display="reveal" : 默认 设置 ， 即 面板 在 下 一 层 ， 页 面 滑 动 时 就 会 显示 。 
口 data-display="overlay" : 面板 内 容 会 覆盖 上 方 页 面 。 
口 data-display="push" : 面板 和 页 面 同时 变化 。 
程序 实例 ch32_22.html : 使 用 3 种 方式 显示 面板 内 容 ，HTML5 按钮 使 用 overlay 方式 ，CSS3 按钮 
使 用 reveal 方式 ，jQuery 按钮 使 用 push 方式 。 


11 <body> 
12 <¢div data-role="page” id="pagel”>» 
13 <div data-role="header"> 


14 <hl> 深 右 数字 /hly 

15 </div> 

16 <div data-role="panel” id="overlaypanel” data-display="overlay”> 

17 <h2>0ver laya 示 HTMLS</h2> 

18 <py 单 击 下 列 按 千 或 在 Panel 区 ， 关闭 Pane]l</p> 

19 #pagel”data-rel-"close”c1ass="ui-btn ui-btn-inline ui-corner-all Overlay 显 示 HTML 5 
20 ui-icon-delete ui-btn-icon-left"> 关 panel</a> 

2 /div> 请 选择 内 容 单 击 下 列 按钮 或 在 Panel 区 外 可 以 
2 <div data-role="panel” id="revealpanel” data-display="reveal"> 关闭 Panel 

3 HTMLS CSS3 jQuery 

24 py 单 击 下 列 按 和 © 关闭 panel 

25 <a href="#pagel” data-rel: m ui-btn-inline ui-corner-all 

26 ui-icon-delete ui-btn-. Ja> 欢迎 参观 

27 

28 anel” id="pushpanel” data-display="push"> 

2 

3 

1 ‘spagel” data-rel="close” class="ui-btn ui-btn-inline ui-corner-all 

32 ui-icon-delete ui-btn-icon-left"> 关 闭 Panel</a> 

33 

34 

35 

37 ‘vi-btn ui-btn-inline ui-corner-all ui-shadow">CSS3c</a> 3 OO EE- A 


39 </div> 
a0 <div data-role="footer™> 


a <hl? 欢 迎 参 观 cyhly 
42 xjdivy 
43 cjdivy 


44 </body> 


HTML5+CSS3 王者 归来 


默认 情况 下 面板 是 在 左边 开启 ， 但 是 可 以 使 用 如 下 属性 设 定 面板 从 右边 开启 。 


data-position="right™ 


程序 实例 ch32_23.html : 重新 设计 ch32 21.html， 但 是 面板 从 右边 开启 。 


16 <div data-role="panel” id="myPanel” data-position="right"> <!-- 建立 Panet 内 容 一 > 


Ge 
深 石 数字 
Panel 的 应 用 
单 击 Panel 名 可 以 开启 Panel 章 击 Panel 区 外 可 以 关闭 Panel 
开启 Panel 


jQuery 也 允许 建立 可 折 登 区 块 ， 本 节 将 分 成 基本 型 和 梨 状 型 来 解说 。 
32-12-1 基本 可 折 芭 区 块 


可 以 使 用 下 列 语法 声明 建立 可 折合 区 块 。 


<div data-role="Panel" id="xxx"> 


<h1>xxx</h1> <!-- 这 是 标题 --> 
<p>yyy</p> <!-- 这 是 被 展开 内 容 --> 
</div> 

程序 实例 ch32_24.html : 折 麦 区 块 的 基本 应 用 。 
11 <body> 3 
12 <div data-role="page” id="page1"> 执行 结果 
13 <div data-role="header"> 四 
14 <h1> 深 石 数字 </h1> 
div 
16 5 
17 <div data-role="content"> mm 
18 <div data-role="collapsible"> © 下 oa (© Sse coalapabk | 
19 <h1>SSE 国 际 认证 -- collapsible</hi> pe 
20 <p>Web Design -- 这 是 被 展开 内 容 </p> ee 
2 SS 滨 厦 学 习 满 水 穿 石 
22 </div> 
23 
24 <div data-role="footer"> 
25 <h1> 深 度 学 习 滴水 穿 石 </h1> 


26 </div> 


28 </body> Ee mo om Er 
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32-12-2 划 状 可 折 双 区 块 
可 以 使 用 下 列 语法 声明 建立 梨 状 可 折 全 区 块 。 


<div data-role="Panel"id="xxx"> 


<h1>xxx</h1> <!-- 这 是 标题 --> 
<p>yyy</p> <!-- 这 是 被 展开 内 容 --> 
<div data-role="Panel" id="zzzn> <!-- 这 是 第 二 层 --> 
<h1>xxx</h1> <!-- 这 是 第 二 层 标题 --> 
<p>yyy</p> <!-- 这 是 第 二 层 被 展开 内 容 --> 
</div> 
</div> 


程序 实例 ch32_25.html : 重新 设计 ch32 24.html， 增 加 第 二 层 可 折 革 区 块 。 
ee 下 列 是 展开 第 一 层 与 第 二 层 区 


13 <div data-role="header"> i 
14 <h1> 深 数字 </h1> 块 的 画面 。 
15 </div> PE] | 
16 EE 
17 <div data-role="content"> ED GD 
18 <div data-role="collapsible"> 
深 石 数字 by: 

19 <h1>SSE 国 际 认证 -- collapsible</h1> EE 
29 <p>Web Design 这 是 被 展开 内 容 </p> pp 
21 cdiv dataarole="collapsible"> |e Sse 国际 认证 一 collapsible 个 sse 国际 从 证- collapslble 
22 <h1>Web Design 认 证 系列 -- 第 二 层 collapsible</hi> 

8 Web Deslgn -- 这 是 被 展开 内 容 - 这 是 被 展开 内 容 
23 <p>HTMLS - - 这 是 被 展开 内 容 </py Gd Ce 
24 </div> © Web Design 认 还 奈 列 一 | © Web peslgnii 系 列 -… 

j 一 一 
25 </div> 
26 -</div> HTMLS … 这 是 被 民 开 内 容 
27 深 殿 学 习 漠 水 讼 石 
28 <div data-role="footer"> 
29 <h1> 深 度 学 习 滴 水 穿 石 </h1> 深度 学 习 清水 穿 厂 
39 </div> 
31 </div> 
32 </body> 避 国 - 站 
Can oem20 ON» om oo nom 


后 建立 表格 


在 24-7 节 笔 者 介绍 了 响应 式 网 页 设计 。jQuery 的 表格 也 符合 响应 式 的 设计 (Responsive 
Design)， 这 种 设计 会 针对 手机 或 平板 电脑 显示 屏 的 宽度 ， 自 行 调配 表格 的 显示 方式 。 目 前 有 两 种 响 
应 式 表格 ， 重 新 排列 (reflow)〉 和 字段 切换 (column toggle)。 


32-13-1 Reflow 表格 


这 种 表 基 本 上 其 数据 会 水 平 排列 ， 当 数据 域 数 太 多 造成 宽度 在 最 小 范围 值 时 ， 数 据 将 被 垂直 处 
理 。 建 立 表格 的 声明 方法 如 下 : 
<table data-role="table" class="ui-responsive"> 


表格 内 容 ， 可 参考 HTML 方式 建立 表格 ; 


</table> 


HTML5+CSS3 王者 归来 


jQuery Mobile 不 支持 rowspan 和 colspan 属性 。 
程序 实例 ch32_26.html : 表格 的 建立 。 在 执行 时 读者 可 以 试 着 更 改 手机 或 平板 显示 屏 的 宽度 ， 以 
有 较 好 的 体会 。 如 果 适 度 为 表格 加 宽 ， 可 以 得 到 不 同 的 结果 。 


11 <body> 和 全 疆 
12 xdiv data-role="page”id="pageone"》 执行 结果 


13 <div data-role="header"> 


14 <hl>Reflow 表 格 </h1> © Opera Mobie Custom — SE 
15 </div> Reflow 表 格 
16 <div data-role="content"> <!-- 页 面 内 容 区 --> 


17 <p>Reflow 表 格 </p> 


et ny Renow 表 格 
18 <p> 请 调整 宽度 了 解 执行 状况 </p> 本 
19 <table data-role="table" class="ui-responsive"》 请 调整 宽度 了 解 执行 状况 
29 <thead> 玫 六 1 
21 <tr> 
22 <th> 客 户 编号 </th> 客户 姓名 。 Peter 
23 <th) 客 户 姓名 </th> 地 址 朝阳 路 18 号 
24 <th> 地 址 </th> 城市 四 
25 <th> 城 市 </th> 
26 <th> 邮 政 编码 </th> Wo 
27 <th> 国 家 </th> 国家 日 本 
28 </tr> 客户 细 号 。 2 
29 </thead> 
30 <tbody> 客户 姓名 John 
31 <tr> 《1-- 第 一 行 资料 --> 地 址 明志 路 
32 <td>1¢/td> 
33 <td>Peter</td> 器 团 - 
34 <td> 朝 阳 踏 18 号 </td> amon e000 PTE 233 Bn IO 
35 <td> 东 京 </td> 
od rr & CT -= 
37 <td> 日 本 </td> 
38 </tr> (CI 
39 <tr> 《1-- 第 二 行 资料 --> Renow 要 格 
49 <td>2¢/td> 
41 <td>John</td> Renow 表 信 
42 <td> 明 志 路 </td> 俏 全 民航 行 状况 
43 
YF ey Ws 寺 户 编导 。 需 户 姓名 地 址 所 市。 邮政 编码 。 国家 
45 <td> 中 国 </td> . ee NR 
46 </tr> 2 on 谓 韦 到 费 洪 901900 中 国 
47 <try <l-- 第 三 行 资料 --> ed hr be 
48 <td>3¢/td> 4 Nelson 和 申 本 省 。 55667 可 国 
49 <td>James</td> 
KR 时 | 
59 <td> 落 日 大 道 </td> 
OO 加 | 
-一 Dr 


32-13-2 Column Toggle 表格 


这 类 表格 碰 上 移动 设备 显示 屏 宽度 不 足 时 ， 会 隐藏 部 分 字段 ， 它 的 声明 方法 如 下 : 


<table data-role="table" class="ui-responsive" data-mode="columntoggle"> 


在 默认 情况 ， 如 果 屏 幕 宽度 不 足 时 ， 会 从 右边 字段 开始 隐藏 ， 不 过 我 们 可 以 在 <th> 元 素 内 使 用 
data-priority 属性 设 定 显示 的 优先 级 ， 值 从 1 到 6，1 是 最 优先 显示 ，6 是 最 后 显示 。 

<th> 一 定 显示 </th> 

<th data-priority="1"> 优先 权 最 高 </th> 

<th data-priority="3"> 优先 权 中 </th> 

<th data-priority="6"> 优先 权 最 低 </th> 

如 果 <th> 元 素 内 没有 设 定 data-priority 属性 ， 表 示 一 定 要 显示 。 
程序 实例 ch32_27.html : 重新 设计 ch32 26.html， 使 用 Column Toggle 类 型 的 表格 。 
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16 «<div data-role="content"> <1-- 页 面 内 容 区 --> =/ 
17 。 <p» 字段 Toggle 去 客 </p> 执行 结果 
18 《py 部 分 字段 会 被 隐藏 </Py> 


19 ‘<table data-role="table”™ data-mode="columntoggle”™ class="ui-responsive” id-"myTable"> |@ 


Gen cuaom - 5 6 CT | 
28 <thead> 
2 <th data-priority="5"> 客 户 编号 </th> 于 册 Toggle 委 格 字 耻 Toggle 惠 村 
23 <th> 容 户 姓名 </th> 
24 <th data-priority="1"> 地 址 </th> 子 岂 Toggke 委 格 字 风 Togzje 表 格 要 户 呈 号 
站 <th tots-prionity="2" ;城市 <fth> 部 分 和 会计 好 下 和 分 字 耻 会 福星 | 器 
26 <th data-priority-"3”> 闻 政 搞 码 </th> | 
27 <th data-priority="4") 国 家 </th> Cm | WM 
28 cjtry | 
吉政 入 
29 </thead> ts a, 
peter 1 Peter 本 二 加 
Jomn 二 二 Jam Wm 
james 大 James 商 昌 大 着 
eson I#m Netson Ism 
网 时 商店 网 时 而 店 
© al 口 国 
= one ma nom" Se gm 


我 们 可 以 在 上 方 右 图 所 示 的 画面 中 色 选 要 显示 的 字段 。 上 例 是 单 击 Columns 按钮 列 出 可 勾 选 的 
字段 ， 我 们 也 可 以 在 <table> 元 素 内 更 改 “Columns” 字 符 串 ， 可 参考 下 列 实例 : 
程序 实例 ch32_28.html : 重新 设计 ch32_26.html， 将 Columns 按钮 改 成 “可 切换 显示 字段 按钮 ” 
修改 的 代码 如 下 。 
a eke 


字段 Toggle 表 格 


字段 Toggle 表 格 
部 分 字段 会 被 隐藏 


可 切换 加 藉 字 段 按 甸 


客户 姓名 地 址 
Peter 朝阳 路 18 号 


32-13-3 将 样式 表 应 用 在 表格 


在 <table> 元 素 class 属性 中 增加 ui-shadow 可 使 建立 的 表格 有 加 阴影 的 框 。 
程序 实例 ch32_29.html : 重新 设计 ch32_26.html， 为 表格 建立 阴影 修改 的 代码 如 下 。 


19 <table data-role="table” data-mode="columntoggle” class="ui-responsive ui-shadow” id="myTable"> 
执行 结果 


© 


ie/localhosyC/User: 


Opera Mobile -Cuntom 


字段 Toggle 表 格 


字 耻 Toggle 委 格 
部 分 字段 会 被 风光 


HTML5+CSS3 王者 归来 


程序 实例 ch32_30.html : 重新 设计 ch32_26.html， 为 表格 每 一 行 加 上 浅 灰色 ， 这 时 可 以 使 用 样式 
表 ， 修 改 的 代码 如 下 。 


1 ye 执行 结果 
11 tr { border-bottom:1px solid lightgray; } 


12 </style> 下 Open obie -caiom — = 


fieocalhosUC/User: 克 


字段 Toggle 表 格 


字 耻 Togale 表 本 
剖 分 于 会 该 隐 下 


Peter 机 阳台 18 号 
John 明 吉 路 
James 落日 大 
eten 工 妥 本 
同时 商店 


程序 实例 ch32_31.html : 重新 设计 ch32_26.html， 设 定 偶数 字段 的 背景 色 是 蓝 色 。 


11 tr { border-bottom:1px solid lightgray; } 执行 结果 


12 trinth-chitd(even) { background:lightblue; } 
13 </style> 


oumnr- 
要 户 姓名 。 地址 
Peter E18 
James 冰晶 大 和 
网 时 站 
怠 国 一 


i 
| 
i 


32-14| 列表 显示 


列表 显示 的 方法 与 HTMLS5 基本 相同 ， 使 用 <ul> 和 <ol> 元 素 ， 不 过 需 在 这 两 个 元 素 内 增加 属 
性 data-role="listview"。 另 外 ，jQuery Mobile 自动 为 窗 体 项 目 设 为 以 按钮 方式 显示 。 
程序 实例 ch32_32.html : 列表 显示 的 应 用 。 


11 <body> 
12 <div data-role="page” id="pageone”> 
13 <div data-role="content"> 


14 <h2> 无 编号 ordered List</h2> 

15 <ul data-role="listview"> 

16 <li><a href="#"> 明 志 科大 </a></1i> 
17 <1i><a href="#"> 台 湾 科大 </a></1i> 
18 <li><a href="#"> 台 北 科大 </a></1i> 
19 </ul> 

29 <h2> 有 编号 Unordered List</h2> 

21 <ol data-role="listview"> 


22 <1i><a href="#"> 明 志 科 大 </a></1i> 
23 <li><a hrel > 台湾 科大 </a></1i> 
24 <1i><a href="#"> 台 北 科 大 </a></1i> 
25 </ol> 

26 </div> 

27 </div> 

28 </body> 


15 
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无 编号 Ordered List 
大 9 
和 大 © 
RN © 
有 编号 Unordered List 

1 大 © 
2 9 
3 © 


在 设计 时 可 以 使 用 data-inset="true" 为 项 目 数 据 增加 圆 角 框 和 部 分 内 间距 (padding)。 
程序 实例 ch32_33.html : 使 用 data-inset="true" 重新 设计 ch32_32.html。 


<ul data-role="listview" data-inset="true"> 


Open Mobile - Custom 一 


无 编号 Ordered List 
用 志 科 大 © 
台湾 科大 © 
台北 科大 © 
有 编号 Unordered List 
1 明志 科大 © 
2 台湾 科大 © 
3 台北 科大 © 
一 mc 


当 项 目 列表 数据 很 多 时 ， 可 以 在 <li> 元 素 内 加 上 属性 data-role="list-divider" 为 项 目 分 类 。 
程序 实例 ch32_34.html : 重新 设计 ch32_33.html， 为 项 目 列表 分 类 。 


11 “body> 
12 <div data-role="page” id="pageone"> 


13 <div data-role="content"> 

14 <h2> 无 编号 ordered List</h2> 

15 <ul data-role="listview" data-inset="true"> 

16 <1li data-role="list-divider"> 科 技 大 学 体系 </1i> 
17 > 明志 科大 </a></1i> 

18 > 台湾 科大 </a></1i> 

19 > 台北 科大 </a></1i> 

29 1list-divider "> 传统 大 学 体系 c/1i> 
21 > 台湾 大 学 </a></1i> 

22 > 台湾 清华 大 学 </a></]i> 

23 <1i><a href="#"> 台 湾 交通 大 学 </a></1i> 

24 </ul> 

25 </div> 

26 </div> 

27 《/body> 


fieylocalhostUCyUser' 碎 攻 <=ose  ]】 


open Mobie -Cusion — 口 国 


无 编号 Ordered List 

科技 大 学 人 和 

明志 科大 © 
台湾 科大 © 
台北 科大 © 
传统 大 学 体系 

台湾 大 学 © 
台湾 清华 大 学 © 
台湾 交通 大 学 © 


HTML5+CSS3 王者 归来 


32-15-1 默认 列表 符号 


如 果 仔 细 看 前 一 节 的 执行 结果 ， 可 以 看 到 在 列表 项 目 右边 有 向 右 箭头 〈right arrow) 符号 ， 我 们 
可 以 使 用 data-icon 属性 设 定 其 他 符号 。 如 果 将 data-icon 属性 设 为 false， 表 示 没 有 符号 ， 可 参考 下 
列 程序 第 17 行 。 
程序 实例 ch32_35.html : 列表 符号 的 应 用 。 


11 <body> 

12 <div data-role="page” id="pageone”> 
13 <div data-role-="content"> 

14 <h2> 中 国 台湾 的 大 学 </h2> 


15 <ul data-role="listview" data-inset="true”"> 

: ee 

17 alse"><a href="#"> 台 湾 科大 false</a></1i> 

18 lus"><a href: plus</a></li> 中 国 台 湾 的 大 学 

19 inus"y<a hre inus</a></1i> 

20 elete”"><a hr 华 大 学 delete</a></1i> 用 韦 科 大 default © 

21 <1i data-icon="location"><a hre 湾 交 通 大 学 location</a></1i> 台湾 科大 false 

22 <july 

23 kjdivy 各 北 科大 plus © 

24 </div> 各 测 大 学 minus © 

A 折 湾 清华 大 学 delete © 
和 台湾 交 通 大 学 location © 


32-15-2 ” 自 设 列表 图 标 
我 们 也 可 以 自行 插入 icon 式 的 图 片 ， 方 法 是 在 <img> 元 素 内 增加 下 列 设 定 : 


<img src="xxx" class="ui-li-icon"> 


程序 实例 ch32_36.html : 重新 设计 ch32_35.html， 在 “明志 科大 ”左边 插入 icon 图 示 。 


16 《li><a href="#"><img src="mit, jpg” class="ui-]i-icon"> 明 志 科 大 default</a></]i> 
2 
执行 结果 


S Opeo Mabie -Cion — 口 醒 汪 

中 国 台湾 的 大 学 

下 明志 科大 default © 

台湾 科 大 false 

台北 科大 plus © 

台 测 大 学 minus © 

台湾 清华 大 学 delete © 

台湾 交通 大 学 location [9] 
局 团 
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32-15-3 清单 的 缩 图 


我 们 也 可 以 用 缩 图 方式 处 理 项 目 列表 旁 的 图 标 。 
程序 实例 ch32_37.html : 在 项 目 列表 旁 增 加 列表 的 实例 。 


11 <body> Z 二 J 年 
12 <div data-role="page” id="page1™> 执行 结果 
13 <div data-role-"main" class="ui-content"> 
14 <h2> 深 石 集团 </h2> © ope Mobie -cusiom 二 本 本 
15 <ul data-role="listview" data-inset="true"> 
16 <li> 
17 <a href="#"><img src="deepstone. jpg”></a> 深 石 集团 
18 </li> 
19 <li> 
20 <a href="#"><img src="topteam.ipg”></a> © 
21 </li> 
22 </ul> 合 © 
23 </div> 
24 </div> 
25 </body> 
局 团 
一 Emma 


32-15-4 为 缩 图 加 上 文字 批注 


我 们 也 可 以 在 缩 图 右边 加 入 文字 ， 可 参考 下 列 实例 。 
程序 实例 ch32_38.html : 重新 设计 ch32_37.html， 在 缩 图 右边 增加 文字 叙述 。 


11 <body> 
12 <div data-role="page”id="pagel"> 执行 结果 
13 


<div data-role="main" class="ui-content"> 


14 <h2> 深 石 集团 </h2> 9 pea Mobile - Custom 

<ul data-role="listview" data-inset="true"”> 

16 <li> 

17 <a href="#"> 

18 <img src="deepstone, jpe”> 

19 《<h2> 深 石 数字 </h2> 

29 <p> 身 度 学 习 滴 水 穿 石 </p> 深 石 数字 © 
消 a mse 

22 </li> 让 站 : 
23 <li> TopTeamIRAIE 

24 <a href="#"> 

25 <img src="topteam,jpg"> 

26 <h2> 佳 魁 信息 </h2> 

27 <p>TopTeam 项 尖 团 队 </p> 

28 </a> 

29 </li> 

31 </div> Cm aaao0 ppt 213 BIO0N » 
32 </div> 

33 </body> 


32-15-5 分 割 列表 按 钮 


当 <li> 元 素 内 有 两 个 <a> 元 素 时 ，jQuery Mobile 会 自动 分 割 列表 按钮 ， 同 时 右边 的 按钮 有 向 右 
的 箭头 图 标 。 如 果 第 二 个 <a> 元 素 内 有 文字 ， 当 鼠标 指针 移 过 去 时 会 列 出 此 文字 。 


HTML5+CSS3 王者 归来 


程序 实例 ch32_39.html : 分 割 列 表 按 钮 的 应 用 。 


六 和 href="#"> EIQ pb ln 
18 cing sre-"despstone, jpe"> 测试 ， 可 以 得 到 下 图 所 示 结 果 。 
19 <h2> 深 石 数字 </h2> 站 本 
世 T] 
22 <a href="#"> 细 说 深 石 </a> 字段 Toggle 表 格 
23 </li> 
24 <li> 字段 Toggle 表 格 
25 <a href="#"> 
未 i js 部 分 字段 会 被 隐藏 
27 <h2> 佳 魁 信息 </h2> Columns.. 
28 《<p>TopTeam 顶 尖 团 队 </p> 
my < 客户 姓名 地 址 
39 <a href="#"> 细 说 佳 魁 </a> Peter 朝阳 路 18 号 
31 </li> John 明志 路 
James 落日 大 道 
执行 结果 Nelson 工 专 路 
按说 在 jQuery Mobile 中 将 鼠标 cesu 指针 移 es 
y 二 、 1 
至 向 右 箭头 图 标 外 可 以 看 到 文字 ， 不 过 笔者 测 
深 石 集团 


深 石 数字 
身 度 学 习 滴水 穿 石 
佳 糙 信 息 
TopTeam 页 尖 团 队 


32-16| 制作 输入 表单 


建立 输入 表单 的 方法 和 HTML 一 样 ， 都 是 使 用 <form> 元 素 ， 各 组 件 的 类 型 需 由 <input> 元 素 的 
type 属性 设 定 。 下 面 将 直接 讲解 各 类 组 件 的 使 用 方法 。 


32-16-1 <label> 元 素 
<label> 常用 在 表单 组 件 的 域名 指定 上 ， 所 以 一 般 较 少 单独 存在 ， 使 用 方法 如 下 : 


<label for=" 名 称 "> 域名 </1abel> 


上 述 for 属性 常 和 组 件 的 id 属性 有 相同 的 名 称 ， 这 样 才 可 以 搭配 。 
32-16-2 text 属性 
text 属性 用 于 文字 输入 。 
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程序 实例 ch32_40.html : 输入 姓名 的 应 用 。 


11 <body> 

12 <div data-role="page” id="page1”> = 

入 div 二 oy 
14 <form method="| i ion=” .php” : . 

bE <label f 天 : 

be <input type="text” name="name” id="userName"> L 潜 名 妈 

17 </form> 

18 </div> 

19 </div> 

28 “/body> 


程序 实例 ch32_41.html : 重新 设计 ch32_40.html， 在 文字 输入 字段 增加 默认 文字 。 本 例 的 核心 是 
增加 placeholder 属性 ， 这 个 属性 的 值 就 是 默认 文字 ， 修 改 部 分 的 代码 如 下 。 


16 <input type="text" name="name" id="userName" placeholder="User Name"> 执行 结 


file://localhosvD:/HTMI 高 
姓名 : 


User Name 


如 果 在 <input> 元 素 内 增加 data-clear-btn="true"， 则 输入 时 会 在 右边 增加 删除 图 示 。 
程序 实例 ch32_42.html : 重新 设计 ch32_40.html， 增 加 data-clear-btn="true" 属性 ， 修 改 部 分 的 代 
码 如 下 。 


16 <input type="text" name="name" id="userName" data-clear-btn="true"> 执行 结 


人 fle/localhosUC/User: 识 


姓名 ; 
洪 锦 提 @| 

32-16-3 ”功能 按钮 属性 

常见 的 功能 按钮 属性 使 用 与 HTML 相同 。 

<input type="submit" value="xxx"> 

<input type="reset" value="xxx"> 

<input type="button" value="xxx"> 
程序 实例 ch32_43.html : 功能 按钮 的 应 用 。 
11 <body> 
12 <div data-role="page"” id-"pagel"> 执行 结果 
13 <div data-role="main" class="ui-content"> 
14 <form method="post” action="/mybookpost.php"> 
15 <*label] for="userName"> 姓 名 :</label> 
16 <input type="text” name="name” id="userNane"> m 
17 <input type="submit”value=" 确 定 "> 
18 <input type="reset”value=" 重 新 输入 "> 
19 </form> 
29 </div> 
21 </div> = 
22 </body> 


重新 输入 


HTML5+CSS3 王者 归来 


程序 实例 ch32_44.html : 重新 设计 程序 实例 ch32 43.html， 调 整 “确定 ”功能 按钮 ， 同 时 增加 图 标 。 


17 <input type="submit”value=" 确 定 ”data-icon="check” 热 和 
18 data-iconpos="right”data-inline="true"> 


TileyWlocalhosUCyUser 页 


重新 输入 


32-16-4 radio 属性 


这 是 选项 按钮 属性 ， 在 此 用 户 可 以 使 用 一 个 选项 ， 规 则 与 HTML 相同 。 
程序 实例 ch32_45.html : 选项 按钮 的 应 用 。 


11 <body> EE 
12 <div data-role="page"> 执行 结 
13 <div data-role="header"> 


14 <h1> 选 项 按钮 Button</h1> 
15 </div> [CT ooo 目 CTTRTT GZ 


16 <div data-role="main" class="ui-content"》 Pr 过 大 tputton 
17 <form method="post" action="/mybookpost, php"> 

18 <fieldset data-role="controlgroup"> 消 输 入 性 于: 请 给 入 性 中 

19 <legend> 请 输入 性 别 :</legend> 有 © a 

20 《label for-"male"> 男 姓 </1abel> 


21 <input type="radio" name="gender” id="male” value="male"> 

22 <label for-"female"> 女 性 </label> 

23 <input type="radio" name="gender” id="female” value="female”"> Ss oe 
24 </fieldset> 

25 <input type="submit”data-inline-"true”value-" 确 定 "> 

26 </formy 

27 </div> 

28 </div> 

29 </body> 


上 述 程序 笔者 使 用 了 HTML 中 介绍 过 的 <fieldset> 元 素 将 按钮 组 织 起 来 ， 并 且 也 使 用 了 HTML 
中 介绍 过 的 <legend> 元 素 建立 字段 文字 。 


32-16-5 checkbox 属性 


这 个 属性 可 以 制作 复 选 框 ， 以 供用 户 选 择 多 个 选项 。 
程序 实例 ch32_46.html : checkbox 的 应 用 。 


11 <body> 
12 <div data-role="page"> 

13 。 xdiv data-role="header"> 
14 <h1> 复 选 框 checkbox</hl> 
15 -</div> 


16 «<div data-role="main” class="ui-content"> 


17 <form method="post” action="/mybookpost.php"> 

18 fieldset data-role-"controlgroup"> 

19 <legend> 请 迁 择 兴趣 :</legend> WE 二 兴 
20 <label for="basketbal1"> 复 球 c/1abel> 海 
21 <input type="checkbox” name="interest” id="basketball” value="basketball”> 

22 <label for="swimming"> 游 /1abely ea 到 
23 «input type="checkbox” name="interest” id="swimming”value="swimming"》 

24 <label for="reading"> 风 读 </1abel> Le L 
25 <input type="checkbox” name="interest” id-"reading” value="reading"> 

26 </fieldset> - SE 
27 <input type="submit” data-inline="true” value=" 确 定 "> 

28 </form> 

29 </div> 

3 </div> 


31 </body> 
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32-16-6 select 属性 


这 个 属性 可 以 建立 下 拉 式 菜单 ， 在 使 用 时 须 使 用 <option> 元 素 建立 菜单 项 目 。 
程序 实例 ch32_47.html : 下 拉 式 菜单 的 应 用 。 
11 xbody> 


12 <div data-role="page"> 
13 <div data-role= "header "> 


14 <h1>Select 菜 单 </hl> 
15 </div> 
16 <div data-role="main" i-content"> 
17 <form method="post" /mybookpost .php"> 荣 单 
18 <fieldset clas i-field-contain"> tis 
19 <label for="city"> 选 择 城 市 </label> 北京 
mm 选择 城市 
29 <select name: ty"> ====3 
21 > 北京 </option> a 1 i 
22 《aption value="Beijing"> 东 京 </option> et 香港 
23 《option value="Beijing"> 香 港 </option> 确定 
24 </select> 
25 </fieldset> 
26 <input type="submit” data-inline="true”value=" 确 定 "> 
27 </formy> 
28 </div> 
29 «</div> 
38 </body> 


如 果菜 单项 目 有 许多 ， 可 以 使 用 <outgroup> 元 素 进行 分 类 。 
程序 实例 ch32_48.html : 重新 设计 ch32_47.html， 增 加 州 别 的 分 类 。 


11 <body> 和 人行 疆 
12 xdiv data-role="page"> 执行 结果 


13 <div data-role="header"> 


14 <h1>Select 菜 单 c/hi> 

15 -</div> 

16 <div data-role="nain" class="ui-content"> 

17 <form method="post”action="/mybookpost.php"> 

18 <fieldset class="ui-field-contain"> 

19 <1abel for="city"> 近 择 城市 /1abe]l> 

2 <select name="city" id="city"> 

21 <optgroup label=" 亚 洲 " 

22 <option val eijing"> 北 京 </option> 

23 <option val Select 或 单 
24 <option value="Beijing"> 香 港 </optiony 

25 </optgroup> 选择 城市 
26 <optgroup label=" 欧 洲 " 

27 <option val sd My 
28 <option val 

29 <option value="Beijing"> 巴 黎 </optiony 确定 
39 </optBroup> 

31 </select> 

32 </fieldset> 

33 <input type="submit”data-inline="true”value=" 确 定 "> 

34 </form> 

35 </div> 

36 </div> 

37 </body> 


32-16-7 range 属性 


这 个 属性 允许 用 拖 忠 方式 输入 数值 。 
程序 实例 ch32_49.html : range 属性 的 应 用 ， 读 者 可 以 通过 拖 忠 了 解数 字 变 化 。 这 个 程序 设 定 该 属 
性 最 小 值 是 0， 最 大 值 是 100。 


HTML5+CSS3 王者 归来 


11 <body> 
12 <div data-role-"page"> 

13 cdiv data-role-"header”"> 

14 <ha > 数值 /hy> 

15 </div> 

16 <div data-role=main” class-"ui-content”"> 


17 <form method="post” action="/mybookpost.php"> 
18 <label for="number"> 数 秆 </1abel> 

19 <input type="range” name="number”id--nunber”value-"199”ain=-g” max-"190"> 
2 </form> 

21 </div> 

22 </div> 

23 </body> 


pe 
执行 结果 GT 


数值 数值 
1oo 由 4 内 国 


32-16-8 On/Off 切换 设计 


设计 On/Off 切换 需 使 用 checkbox 属性 ， 然 后 设 定 data-role="flipswitch"。 
程序 实例 ch32_50.html : On/Off 切换 设 计 的 应 用 。 


11 <body> 

12 <div data-role="page"> 

13 <div data-role="header"> 
14 <h1>0n/0ff 切 换 </h1> 


"ui-content"> 

”action="/mybookpost.php"> 

Witch ">On/Off 切 执 </label> 

19 <input type="checkbox" data-role="flipswitch" name="switch" id="switch"> 
29 </form> 

2 </div> 

22 </div> 

23 </body> 


行 疆 
执行 结果 GD 


On/off 切 换 On/Off 切 换 


On/off 切 换 Omoff 切 换 
off on 


习题 

1. 请 重新 设计 ch32_19.html， 将 图 标 放 在 下 方 。 

2. 请 重新 设计 ch32_39.html， 使 得 当 单 击 右边 按钮 时 列 出 对 话 框 ， 其 中 显示 的 信息 请 自行 设置 。 

3. 请 设计 ch32_ 44.html， 将 “重新 输入 ”按钮 处 理 成 “确定 ”按钮 的 样式 ， 然 后 自行 设置 不 
一 样 的 图 标 。 

. 请 使 用 jQuery Mobile 设计 一 个 自己 的 手机 网 页 。 

.请 使 用 jQuery Mobile 重新 设计 第 9 章 的 习题 。 


将 网 页 转 成 APP 应 用 程序 


本 章 摘要 

33-1 准备 HTML 文件 

33-2 准备 config.xml 配置 文件 
33-3 ”压缩 网 页 与 配置 文件 
33-4 建立 APP 应 用 程序 

33-5 重新 上 传 文件 


PhoneGap 是 一 个 开放 原 码 的 移动 装置 开发 框架 ， 当 程序 设计 师 使 用 HTML、CSS、JavaScript 
开发 应 用 程序 时 ， 可 以 用 它 将 应 用 程序 转 成 APP 应 用 程序 。 这 个 软件 原 开发 商 是 Nitobi 公司 ， 后 来 这 
家 公司 被 Adobe 公司 收购 。 


HTML5+CSS3 王者 归来 


| 33-1 | 准备 HTML 文件 


首先 你 可 以 任 选 一 个 想 转 成 APP 的 HTML 文件 。 本 章 的 实例 笔者 使 用 ch30_34.html 的 时 钟 程 
序 ， 不 过 使 用 前 需 将 文件 名 改 为 index.html。 


| 33-2 准备 config.xml 配置 文件 


其 实 配置 文件 的 基本 规范 也 是 W3C 制定 的 ， 更 多 这 方面 的 详细 知识 ， 读 者 可 以 参考 网 页 docs. 


phonegap.com。 


Docs Home Eph ~ | 
GETTING STARTED Configuring | 
| 
Turoamts oneGop snd PheneGip Beld sre bit upon Be puch Cordom paid Sperd sama me | 
oes cordova 0 to Bet more mar with how PhoneGsp and Cordov apphcatons re configured | 
reneNcE 
Mhonecap aopbatons me orgued gaconfig-mmtlle Th told be at the ionalyow 
PhowEGwpautp iotm 
om The conf 1€-xmt te folows We vcwdpt geoteacon nbows deveiopers to eashy pecty meta 
re sano od heir oppbcadone. Wu an soe tw ow Phorecsp Stet 
ey Weire continualy adding features to ou Con f 1g. Al support to give PhoneGap Build developers more 
ee (power to customiee thew apps f there ore any Sci feature you'd We to see support fot, please Iet ur 
Modiyng anes om 
aaandspaa ， 
am 


2 rmple eon md 


上 述 网 页 往 下 深 动 可 以 看 到 示范 config.xml 文件 。 下 面 是 笔者 参考 示范 文件 , 修改 的 自己 的 版 本 。 


1 <?xml version="1.0" encoding="UTF-8" ?> 
2 <widget xmlns =" H 


3 

4 

5 versionCode 

6 version 

7 

8 <! 一 versionCode is optional and Android only 一 > 

9 

10 ”<name>DeepStone</name> 

12 <description> 

13 HTML5+C553 

14 </description> 

16 <author href="https://www.deepstone.com.tw" email="cshung@deepstone.com.tw"> 
洪 锦 鬼 


18 </author> 


20 </widget> 


上 述 文件 几 个 关键 点 说 明 如 下 : 
口 第 4 行 是 APP 的 标识 符 ， 笔 者 在 此 设 定 DeepStone，W3C 建议 这 里 使 用 反 向 域名 ， 例 如 
tw.com.deepstone。 此 处 笔者 使 用 了 简化 方式 。 


口 第 5 和 第 6 行 是 版 本 编号 和 次 编号 ， 笔者 使 用 了 上 默认 编号 。 
口 第 10 行 是 APP 的 名 称 ， 本 例 笔者 使 用 DeepStone， 下 面 是 成 功 建立 APP 后 看 到 的 名 称 。 


第 33 章 将 网 页 转 成 APP 应 用 程序 


口 第 13 行 是 这 个 APP 的 描述 。 
口 “第 16 和 第 17 行 是 笔者 公司 和 电子 邮件 地 址 。 
如 果 你 希望 有 自己 的 App 图 示 ， 可 以 在 第 18 行 后 面 加 上 如 下 指令 。 


<icon src="icon.jpg" /> 


请 注意 上 述 是 XML 语法 。 


攻 攻 区】 于 缩 网 页 与 配置 文件 


必须 将 网 页 的 HTML 文件 与 config.xml 配置 文件 压缩 后 使 用 ， 如 果 你 的 程序 有 图 片 文件 也 必需 
将 它 一 起 压缩 成 zip 文件 。 


IDE. ch33 -° EN 
| = ESE -"@ 
© 5 - + Hes 6 EE 
OATAD) 四 二 一 
¥ 20170607HTMLSSE bs 1 
Cerficate 
BE 446d43459991fa686bac 
WE didbco04sdods2cabt38 
天 eeazo 因 confg | deepsone ndec 
HM 
i i 
HTMLS+CS53 
BE Orice2013 二 压缩 结果 ) 
3 全 号 EE 图 


本 例 笔者 压缩 结果 是 存 成 deepstone.zip 文件 。 


| 33-4 | 建立 APP 应 用 程序 


首先 联机 到 http://www.phonegap.com， 可 以 请 选择 Package your app in the cloud， 单 击 
看 到 下 图 所 示 画 面 : FIND OUT MORE 按钮 。 
ene 


Create your app with PhoneGap Package your app in the cloud 


继续 单 击 Sign in 链接 。 


426 


HTML5+CSS3 王者 归来 


如 果 当 前 系统 装 有 Adobe Account 则 单 击 
Sign in with Adobe ID 链接 ， 如 果 没 有 则 单 击 下 
方 的 Sign up for a new account。 非 常 容易 申请 ， 
首先 选择 free。 


thind party puglns 


rr YES 
uptosd pgns NO 


callsbomions 


接 下 来 输入 姓名 ，E-mail 和 密码 〈 供 以 后 登 
录 使 用 )。 输 入 完成 后 单 击 Sign up 按钮 。 


IA| 


Sign up to continue 


国 PhoneGap Build 


Le 和 


Taiwan v 


By clicking "sign up"1agree that 
1havereadand accepted the Terms of Use and Privacy Policy 

® Adobe may keep me informed via email about products and services 
Learn more, 


Already have an Adobe ID? Sign In 


接着 需 上 传 zip 文件 ， 请 单 击 Upload a zip 
file 按钮 。 


Welcome to Adober phoneGapr Build! 
Lets get you stared buiding an app 


= | 一 1 ss ~ 
请 选择 deepstone.zip 文件 , 然后 单 击 打开 按钮 。 
a 可 
= a 
然后 单 击 Ready to build 按钮 。 
-= 5 


@ am 
部 


了 DeepStone 世 SN 一 一 


[IT 


这 时 出 现 建 立 完 成 的 画面 ， 在 右上 方 可 以 看 


到 二 维 码 ， 请 使 用 Android 操作 系统 的 手机 扫描 


此 二 维 码 。 


© = 


第 33 章 将 网 页 转 成 APP 应 用 程序 


接着 请 遵照 程序 指示 下 载 、 安 装 ， 就 可 以 得 到 所 建 的 APP 图 标 和 时 钟 APP。 


~ Pu] 
https:// 9 由 3 | 
build.phonegap.com/ 


apps/2735008/install/ 


YY69Jax5YB5N7CNyu4q8 


取消 


二 可 重新 上 传 文件 


由 于 是 免费 所 以 PhoneGap 只 能 建立 一 个 APP， 如 果 想 更 新 APP， 请 单 击 有 条 形 码 窗口 画面 那 
一 页 左下 方 的 Update code 按钮 ， 然 后 重新 选择 zip 文件 ， 再 上 传 即 可 。 单 击 “ 浏 览 ”按钮 可 以 选择 


文件 。 最 后 预 祝 读者 学 习 愉快 。 
吉 Update | 癸 Rebuldal | 


浏览 … 
destfuctive action 
ef copy of your old code 
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附录 A ”HTML 标记 列表 


标 记 页 码 
天 本本 5 下 
<ldoctype> 8 
<a> Si 
<abbr> 23 
<acronym> HTMLS5 不 支持 | 
<address> 36 
<applet> HTMLS5 不 支持 | 
<area> $7 
<article> HTML5 新 增 123 
<aside> HTML5 新 增 123 
<audio> HTMLS5 新 增 68 
<b> 20 
<base> 38 
<basefont> HTML5 不 支持 
<bdi> HTMLS5 新 增 24 
<bdo> | 
<big> HTMLS5 不 支持 
<blockquote> 21 
<body> 9 | 
<br> 17 
<button> 298 
<canvas> HTML5 新 增 367 
<caption> SY 
<center> HTMLS5 不 支持 
<cite> 2 | 
<code> 22 
<col> | 51 
<colgroup> SL 
<datalist> HTML5 新 增 107 | 
<dd> 45 
<del> 24 
<dfn> HTML5 新 增 23 
<dir> HTMLS5 不 支持 
<div> 119 
<dl> 45 
<dt> 45 
<em> 21 
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标 记 码 
<embed> 77 
<fieldset> 108 
<figcaption> HTMLS5 新 增 56 
<figure> HTMLS5 新 增 56 
<font> HTMLS5 不 支持 
<footer> HTMLS5 新 增 20 
<form> 84 
<frame> HTMLS 不 支持 
<frameset> HTML5 不 支持 
<hl>to <h6> 16 
<head> 9 
<header> HTMLS5 新 增 19 
<hgroup> HTMLS5 新 增 122 
<hr> 18 
<html> 8 
<i> | 21 
<iframe> 80 
<img> 55 
<ins> 24 
<input> 85 
<keygen> HTML5 新 增 109 


<isindex> HTML5 不 支持 


<kbd> ey 
<label> 102 
<legend> 108 
<li> 41 
<link> 132 
<map> 57 
<mark> HTML5 新 增 22 
<meta> 12 
<meter> HTML5 新 增 103 
<nav> HTMLS5 新 增 122 
<noframe> HIMLS 不 支持 

<noscript> 116 
<object> 78 
<o> 41 
<optgroup> 106 
<option> 107 
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标记 页 上 玫 
<p> 18 
<param> 79 
<pre> 17 
<progress> HTML5 新 增 103 
<q> 21 
<Ip> HTMLS5 新 增 到 | 
<rt> HTMLS5 新 增 25 
<ruby> HTML5 新 增 25 | 
<s> HTMLS5 不 支持 
<samp> 22 | 
<script> 117 
<section> HTMLS5 新 增 19 | 
<select> 104 
<small> 22 | 
<source> HTMLS 新 增 70 
<span> 119 | 
<strike> HTMLS5 不 支持 
<strong> 20 
<style> 52 
<sub> 26 | 
<sup> 26 
<table> 47 | 
<tbody> 48 
<td> 47 | 
<textarea> 101 
<tfoot> 49 
<th> 48 
<thead> 48 | 
<time> HTMLS5 新 增 124 
<title> 13 | 
<tr> 47 
<track> HTML5 新 增 72 | 
<tt> HTMLS5 不 支持 
A> HIML5 不 支持 
<u> 41 
<var> HTMLS5 新 增 2 
<video> HTMLS 新 增 65 
<xmp> HIMLS 不 支持 
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附录 B HTML 属性 索引 表 
属 性 适用 元 素 页 码 
accept <input> 85 
accept-charset <form> 85 
accesskey 全 局 属性 112 
action <form> 84 
alt <area>,<img>,<input> 本 
autocomplete <form>,<input> 85 
autofocus <button>,<input>,<keygen>,<select>,<textarea> 85 
autoplay <audio>,<video> 69 
border <table> 47 
challenge <keygen> 105 
charset <meta>,<script> 12 
checked <input> 86 
class 全 局 属性 112 
cols <textarea> 101 
colspan <td>,<th> 49 
content <meta> 13 
contenteditable 全 局 属性 W2 
contextmenu 全 局 属性 112 
controls <audio>,<video> 69 
coords <area> 57 
data <object> 78 
data-* 全 局 属性 和 2 
datetime <del>,<ins>,<time> 99 
default <track> 73 
dimame <input>,<textarea> 86 
<button>,<fieldset>,<input>,<keygen>,<optgroup>,<option>,<select>, 
disabled 86 
<textarea> 
draggable 全 局 属性 113 
enctype <form> 85 
for <label>,<output> 102 
<button>,<fieldset>,<input>,<keygen>,<label>,<meter>,<object>,<output>, 
nim <select>,<textare> 多 
formaction <button>,<input> 
formenctype <input> 
formmethod <input> 
formnovalidate <input> 
formtarget <input> 


height 


<canvas>,<embed>,<iframe>,<img>,<input>,<object>,<video> 
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属 性 适用 元 素 页 码 
hidden 全 局 属性 Ee 
high <meter> 103 
href <a>,<area>,<base>,<link> 9.31 
http-equiv <meta> 12 
id 全 局 属性 35 
keytype <keygen> 105 
kind <track> 3 
label <track>,<option>,<optgroup> 72 
lang 全 局 属性 113 
list <input> 86 
loop <audio>,<video> 69 
low <meter> 103 
max <input>,<meter>,<progress> 88 
maxlength <input>,<textarea> 87 
media <a>,<area>,<link>,<source>,<style> 84 
mediagroup <vedio> 69 
method <form> 84 
min <input>,<meter> 103 
multiple <input>,<select> 87 
muted <video>,<audio> 69 

<button>,<fieldset>,<form>,<iframe>,<input>,<keygen>, 
2 <map>,<meta>,<object>,<output>,<param>,<select>,<textarea> 
novalidate <form> 85 
onabort <audio>,<embed>,<img>,<object>,<video> 116 
onafterprint <body> 115 
onbeforeprint <body> 115 
onbeforeunload <body> 115 
onblur 所 有 可 看 到 属性 115 
oncanplay <audio>,<embed>,<object>,<video> 116 
oncanplaythrough |<audio>,<video> 116 
onchange 所 有 可 看 到 属性 115 
onclick 所 有 可 看 到 属性 116 
oncontextmenu 所 有 可 看 到 属性 115 
oncopy 所 有 可 看 到 属性 116 
oncuechange <track> 116 
oncut 所 有 可 看 到 属性 116 
ondblclick 所 有 可 看 到 属性 116 
ondrag 所 有 可 看 到 属性 116 


附录 B HTML 属性 索引 表 
ondragend 所 有 可 看 到 属性 116 
ondragenter 所 有 可 看 到 属性 116 
ondragleave 所 有 可 看 到 属性 116 
ondragover 所 有 可 看 到 属性 116 
ondragstart 所 有 可 看 到 属性 116 
ondrop 所 有 可 看 到 属性 116 
ondurationchange <audio>,<video> 116 
onemptied <audio>,<video> 7 
onended <audio>,<video> jl 了 7 
onerror <audio>,<body>,<embed>,<img>,<object>,<script>,<style>,<video> 115 
onfocus 所 有 可 看 到 属性 5 
onhashchange <body> 115 
oninput 所 有 可 看 到 属性 115 
oninvalid 所 有 可 看 到 属性 Js5 
onkeydown 所 有 可 看 到 属性 ids 
onkeypress 所 有 可 看 到 属性 115 
onkeyup 所 有 可 看 到 属性 115 
onload <body>,<iframe>,<img>,<input>,<link>,<script>,<style> 115 
onloadeddata <audio>,<video> 7 
onloadstart <audio>,<video> yy 
onmessage 所 有 可 看 到 属性 115 
onmousedown 所 有 可 看 到 属性 116 
onmousemove 所 有 可 看 到 属性 116 
onmouseout 所 有 可 看 到 属性 116 
onmouseover 所 有 可 看 到 属性 116 
onmouseup 所 有 可 看 到 属性 116 
onmousewheel 所 有 可 看 到 属性 116 
onoffline <body> 115 
ononline <body> 共和 
onpagehide <body> Ms 
onpageshow <body> 115 
onpaste 所 有 可 看 到 属性 116 
onpause <audio>,<video> 
onplay <audio>,<video> 117 
onplaying <audio>,<video> oy 
onpopstate <body> MS. 
onprogress <audio>,<video> 117 
onratechange <audio>,<video> 117 
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属 性 适用 元 素 页 码 
onreset <form> 115 
onresize <body> 115 
onscroll 所 有 可 看 到 属性 116 
onseeked <audio>,<video> UL7， 
onseeking <audio>,<video> 117 
onselect 所 有 可 看 到 属性 115 
onshow <menu> 117 
onstalled <audio>,<video> il7 
onstorage <body> lls 
onsubmit <form> 115 
onsuspend <audio>,<video> 7 
ontimeupdate <audio>,<video> 117 
ontoggle <details> 117 
onunload <body> 115 
onvolumechange <audio>,<video> 117 
onwaiting <audio>,<video> 17 
onwheel 所 有 可 看 到 属性 116 
optimum <meter> 103 
pattern <input> 87 
placeholder <input>,<textarea> 87 
poster <video> 65 
preload <audio>,<video> 69 
readonly <input>,<textarea> 87 
Tel <a>,<area>,<link> 132 
required <input>,<select>,<textarea> 要 
reversed <ol> 44 
IOWS <textarea> 101 
rOWSspan <td>,<th> 50 
selected <option> 105 
shape <area> Sn 
size <input>,<select> 122 
span <col>,<colgroup> 51 
spellcheck 全 局 属性 113 

<audio>,<embed>,<iframe>,<img>,<input>,<script>,<source>,<track>, 
时 <video> 
<iframe> 80 
srclang <track> 入 
<ol> 42 


附录 B HTML 属性 索引 表 
属 适用 元 素 页 码 
step <input> 87 
style 全 局 属性 51 
tabindex 全 局 属性 114 
target <a>,<area>,<base>,<form> 31 
title 全 局 属性 13 
translate 全 局 属性 115 
<button>,<embed>,<input>,<link>,<menu>,<object>,<script>,<source>， 
EE <style> 人 
usemap <img>,<object> 57 
value <button>,<input>,<li>,.<option>,<meter>,<progress>,<param> 43 
width <canvas>,<embed>,<iframe>,<img>,<input>,<object>,<video> 55 
wrap <textarea> 101 
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属 EE 页 码 
@font-face 3 
@import 133,285 
(@keyframes 259 
@media 282 
align-content 250 
align-items 247 
align-self 249 
animation 265 
animation-name 259 
animation-delay 264 
animation-direction 262 
animation-duration 259 
animation-fill-mode |264 
animation-iteration-count 261 
animation-play-state 263 
animation-timing-function 260 
backface-visibility 278 
background 167 
background-attachment 166 
background-clip 187 
background-color 160 
background-image 161 
background-origin 188 
background-position 163 
background-repeat 162 
background-size 165 
border 152,179 
border-bottom 179 
border-bottom-color 178 
border-bottom-left-radius 180 
border-bottom-style 176 
border-bottom-width 179 
border-collapse 201 
border-color 178 
border-image 181 
border-image-outset 184 
border-image-repeat 185 
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属 性 页 码 
border-image-slice 186 
border-image-source 186 
border-image-width 186 
border-left 179 
border-left-color 178 
border-left-style 176 
border-left-width 179 
border-radius 180 
border-right 179 
border-right-color 178 
border-right-style 176 
border-right-width 179 
border-spacing 197 
border-style 176 
border-top 179 
border-top-color 178 
border-top-left-radius 180 
border-top-right-radius 180 
border-top-style 176 
border-top-width 179 
border-width 179 
box-shadow 188 
box-sizing 190 
break-after 220 
break-before 219 
break-inside 220 
caption-side 219 
clear 231 
color 129 
column-count 213 
column-fill 218 
column-gap 215 
column-rule 215 
column-rule-color 216 
column-rule-style 215 
column-rule-width 216 


columns 


213,215 


附录 C CSS 属性 索引 表 


属 页 码 
column-span 217 
column-width 214 
cursor 281 
display 224,237 
empty-cells 199 
flex 245 
flex-basis 244 
flex-direction 238 
flex-flow 241 
flex-grow 243 
flex-shrink 243 
flex-wrap 239 
float |230 
font 137 
font-face 137 
font-family 134 
font-size 区 
font-size-adjust 136 
font-style 135 
font-variant 136 
font-weight 135 
height 223 
justify-content 246 
letter-spacing 146 
line-height 145 
list-style 157 
list-style-image 156 
list-style-position 156 
list-style-type 135 
margin 170 
margin-left 170 
margin-right 170 
margin-top 170 
max-height 223 
max-width 223 
min-height 223 
min-width 223 
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属 性 页 码 
object-fit 233 
opacity 159 
order 241 
outline 192 
outline-color 192 
outline-offset 192 
outline-style 192 
outline-width 192 
over-flow 190 
overflow-x 190 
overflow-y 190 
padding 174 
padding-bottom 174 
padding-left 174 
padding-right 174 
padding-top 174 
perspective 275 
perspective-origin 277 
position 225 
resize 193 
table-layout 202 
tab-size 151 
text-align 129 
text-decoration 149 
text-decoration-color 150 
text-decoration-line 150 
text-decoration-style 151 
text-indent 144 
text-overflow 153 
text-shadow 149 
text-transform 148 
transform 267,271 
transform-origin 271,274 
transform-style 277 
transition 256 
transition-delay 255 
transition-duration 254 
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属 EE 页 码 
transition-property 254 
transition-timing-function 255 
vertical-align 234 
visibility 233 
white-space 147 
width 223 
word-spacing 147 
word-wrap 152 
Z-index 3 
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附录 D ”网 页 设计 使 用 的 单位 


网 页 设计 时 常常 需要 指定 长 度 ， 有 时 可 以 使 用 绝对 单位 ， 有 时 可 以 使 用 相对 单位 ， 本 附录 将 对 
此 做 一 个 完整 的 说 明 。 


本 汗 下 绝对 单位 


网 页 设计 时 常见 的 绝对 单位 如 下 : 
cm: 厘米 

mm : 毫米 

让: 英寸 1in=2.54cm 
pt (point) : 点 1 in= 72pt 
pc (pica) : 派 卡 1pc= 12pt 


By 相对 单位 


请 参考 下 图 ， 理 解 对 ex 和 em 的 定义 : 


网 页 设计 时 常见 的 相对 单位 如 下 : 

em : 指 的 是 字体 的 高 度 。 由 于 使 用 者 可 以 自行 调整 浏览 器 显示 的 字号 ， 所 以 这 个 单位 是 相对 
单位 。 

ex ; 指 的 是 小 写 英文 字母 x 的 高 度 ， 这 个 单位 的 实际 大 小 也 因 浏 览 器 显示 的 字号 而 定 。 

px : 这 是 最 常用 的 单位 ， 以 屏幕 分 辩 率 的 pixel (像素 ) 为 单位 。 这 也 是 一 个 相对 单位 ， 因 为 它 
会 因 所 使 用 的 屏幕 分 辩 率 而 产生 不 同 单位 大 小 ，lem=16px。 


Bs 类 百分比 


有 时 也 以 字体 的 百分比 定义 长 度 单位 ， 例 如 ， 下 列 语句 定义 以 字号 的 90% 显示 。 
Pl 

font-size:90% 
} 


认识 网 页 设计 的 颜色 


EE SS 
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认识 网 页 设计 的 颜色 


AliceBlue #FOF8FF 
AntiqueWhite #FAEBD7 
Aqua #00FFFF 
Aquamarine #7FFFD4 
Azure #FOFFFF 
Beige #F5F5DC 
Bisque #FFE4C4 
Black #000000 

BlanchedAlmond #FFEBCD 
Blue #0000FF 
BlueViolet #8A2BE2 
Brown #A52A2A 
BurlyWood #DEB887 
CadetBlue #5F9EAO 
Chartreuse #7FFF00 
Chocolate #D2691E 
Coral #FF7F50 

ComflowerBlue #6495ED 
Comsilk #EFFF8DC 
Crimson #DC143C 
Cyan #00FFFF 
DarkBlue #00008B 

DarkCyan #008B8B 
DarkGoldenRod #B8860B 
DarkGray #A9A9A9 
DarkGrey #A9A9A9 
DarkGreen #006400 

DarkKhaki #BDB76B 
DarkMagenta #8B008B 
DarkOliveGreen #556B2F 
DarkOrange #FF8C00 
DarkOrchid #9932CC 
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DarkRed #8B0000 
DarkSalmon #E9967A 
DarkSeaGreen #8FBC8F 
DarkSlateBlue #483D8B 
DarkSlateGray #2F4F4F 
DarkSlateGrey #2F4F4F 
DarkTurquoise #00CED1 
DarkViolet #9400D3 
DeepPink #FF1493 
DeepSkyBlue #00BFFF 
DimGray #696969 
DimGrey #696969 
DodgerBlue #1E90FF 
FireBrick #B22222 
FloralWhite #FFFAFO 
ForestGreen #228B22 
Fuchsia #FFOO0FF 
Gainsboro #DCDCDC 
GhostWhite #F8F8FF 
Gold #EFFD700 
GoldenRod #DAA520 
Gray #808080 
Grey #808080 
Green #008000 
GreenYellow #ADFF2F 
HoneyDew #FOFFFO 
HotPink #FF69B4 
IndianRed #CD5C5C 
Indigo #4B0082 
Ivory #FFFFFO 
Khaki #F0E68C 
Lavender #E6E6FA 
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色 条 
LavenderBlush #FFFOF5 
LawnGreen #7CFCO0 
LemonChiffon #FFFACD 
LightBlue #ADD8E6 
LightCoral #F08080 
LightCyan #EOFFFF 
LightGoldenRodYellow #FAFAD2 
LightGray #D3D3D3 
LightGrey #D3D3D3 
LightGreen #90EE90 
LightPink #FFB6C1 
LightSalmon #FFAO07A 
LightSeaGreen #20B2AA 
LightSkyBlue #87CEFA 
LightSlateGray #778899 
LightSlateGrey #778899 
LightSteelBlue #BOC4DE 
LightYellow #FFFFEO0 
Lime #00FF00 
LimeGreen #32CD32 
Linen #FAFOE6 
Magenta #FFOOFF 
Maroon #800000 
MediumAquaMarine #66CDAA 
MediumBlue #0000CD 
MediumOrchid #BA55D3 
MediumPurple #9370DB 
MediumSeaGreen #3CB371 
MediumSlateBlue #7B68EE 
MediumSpringGreen #00FA9A 
MediumTurquoise #48D1CC 
MediumVioletRed #C71585 
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ETTT EE ET EDE3 


MidnightBlue #191970 
MintCream #F5FFFA 
MistyRose #FFE4E1 
Moccasin #FFE4B5 
NavajoWhite #FFDEAD 
Navy #000080 
OldLace #FDF5E6 
Olive #808000 
OliveDrab #6B8E23 
Orange #FFA5S00 
OrangeRed #FF4500 
Orchid #DA70D6 
PaleGoldenRod #EEESAA 
PaleGreen #98FB98 
PaleTurquoise #AFEEEE 
PaleVioletRed #DB7093 
PapayaWhip #FFEFD5 
PeachPuff #FFDAB9 
Peru #CD853F 
Pink #FFC0CB 
Plum #DDAODD 
PowderBlue #BOE0E6 
Purple #800080 
RebeccaPurple #663399 
Red #FF0000 
RosyBrown #BC8F8F 
RoyalBlue #4169E1 
SaddleBrown #8B4513 
Salmon #FA8072 
SandyBrown #4A460 
SeaGreen #2E8B57 
SeaShell #FFFSEE 
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二 
Sienna #A0522D 
Silver #C0COCO 
SkyBlue #87CEEB 
SlateBlue #6A5ACD 
SlateGray #708090 
SlateGrey #708090 
Snow #FFFAFA 
SpringGreen #00FF7F 
SteelBlue #4682B4 
Tan #D2B48C 
Teal #008080 
Thistle #D8BFD8 
Tomato #FF6347 
Turquoise #40E0D0 
Violet #EE82EE 
Wheat #5DEB3 
White #FFFFFF 
WhiteSmoke #F5F5F5 
Yellow #FFFF00 
YellowGreen #9ACD32 


